The JavaScript connected to my option tag in my My php crud web application is not working tell me what's the problem in it
I am developing a crud web application using php , I successfully store data to my database but the problem is with a option tag which isn’t working with JavaScript and php and I am unable to show that database data to my front-end on click on my option tag.my app is accepting notes successfully but isn’t able to display on click on my frontend
<?php $dataTable1=[]; $descList=[]; if ($_SERVER['REQUEST_METHOD'] == 'POST') { $notesTitle = $_POST['noteTitle']; $noteDesc = $_POST['noteDesc']; //connect to db //connect to db $link = mysqli_connect("localhost", "root", ""); $res = mysqli_query($link, "SHOW DATABASES"); $db_list = []; while ($row = mysqli_fetch_assoc($res)) { array_push($db_list, $row['Database']); } $dataBase = "notesManager"; function DupliChecker($DataBaseName, $db_array) { for ($i = 0; $i < count($db_array); $i++) { if ($DataBaseName == $db_array[$i]) { return "Already exists"; break; } elseif ($i == count($db_array)-1 && $DataBaseName<>$db_array[$i]) { return "create database"; } else { continue; } } } // create a database if (DupliChecker($dataBase, $db_list) == "Already Exists") { echo("bye"); } else { $sql = "CREATE DATABASE $dataBase"; mysqli_query($link, $sql); $dataBaseLink=mysqli_connect("localhost","root","",$dataBase); $sql1="CREATE TABLE `notesTable` ( `sno` INT(6) NOT NULL AUTO_INCREMENT , `NoteTitle` VARCHAR(255) NOT NULL , `NotesDescription` VARCHAR(255) NOT NULL , PRIMARY KEY (`sno`) )"; mysqli_query($dataBaseLink,$sql1); } //insert data in db //data containing table $out = mysqli_query($dataBaseLink,"SELECT * FROM `notestable`"); while($result=mysqli_fetch_assoc($out)){ array_push($dataTable,$result["NoteTitle"]); } function duplicateDataRemover($data,$array){ for($j=0;$j<count($array);$j++){ if($array[$j]==$data){ return "Already Exist"; } elseif($j==count($array)-1 && $array[$j]<>$data){ return "Non-Duplicate"; }else{ continue; } } } $dataBaseLink=mysqli_connect("localhost","root","",$dataBase); if(duplicateDataRemover($notesTitle,$dataTable)=="Non-Duplicate"){ $sql2="INSERT INTO `notestable` (`NoteTitle`, `NotesDescription`) VALUES ('$notesTitle', '$noteDesc')"; $Output = mysqli_query($dataBaseLink,$sql2); if(!$Output){ echo("the program failed due to"); }else{ echo("successfull"); } }else{ echo("this data already exists"); } } $ele=0; $ele1=0; $dataBaseLink1=mysqli_connect("localhost","root","","notesmanager"); $out2 = mysqli_query($dataBaseLink1,"SELECT * FROM `notestable`"); while($result3=mysqli_fetch_assoc($out2)){ array_push($descList,$result3["NotesDescription"]); } $out3 = mysqli_query($dataBaseLink1,"SELECT * FROM `notestable`"); while($result2=mysqli_fetch_assoc($out3)){ array_push($dataTable1,$result2["NoteTitle"]); } $NoteTitleCount=count($dataTable1); $NoteDescCount=count($descList); ?> <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="Phpcrud.css"> <title>PhpCrud</title> </head> <body> <nav> <ul> <li><img src="images.png" alt="php" height="30px" width="60px"></li> <li>Home</li> <li>AboutUs</li> <li>ContactUs</li> <li><img id="search" src="Search.jpeg" height="30px" width="40px"></li> </ul> </nav> <form action="/noteData.php" method="post" class="container"> <h1>Add a Note to iNotes</h1> <label for="noteTitle">Note Title</label> <br> <input id="noteTitle" type="text" placeholder="Note Title" name="noteTitle"> <br> <label for="noteDesc">Note Description</label> <br> <input id="noteDesc" type="text" placeholder="This is a Note" name="noteDesc"> <br> <button class="btn">Add Notes</button> <br> <div id="con"> <label class="Show_label" for="Show">Show</label> <select id="Show"> <option value="Custom">Custom</option> <option value="10" selected>10</option> <option onclick="ShowData(10,<?php echo($NoteTitleCount); ?>,<?php echo($NoteDescCount); ?> ,<?php echo(json_encode($dataTable1)); ?>,<?php echo(json_encode($descList)); ?>)">20</option> <option onclick="ShowData(20)" value="30">30</option> <option value="40" >40</option> <option value="50">50</option> <option value="60" >60</option> <option value="70">70</option> <option value="80" >80</option> <option value="90">90</option> <option value="100" >100</option> </select> <label class="Show_label">entries</label> <label id="Search_Label" for="Search_Bar">Search :</label> <input id="Search_Bar" type="search" placeholder="Search"> </div> </form> <div id="notesManager"> <button onclick="ShowData(20,<?php echo($NoteTitleCount); ?>,<?php echo($NoteDescCount); ?> ,<?php echo(json_encode($dataTable1)); ?>,<?php echo(json_encode($descList)); ?>)" value="Data">data</button> <h1><?php echo($NoteTitleCount);?></h1> <table> <tr id="heading"> <th>S No.</th> <th>Title</th> <th>Description</th> <th>Actions</th> </tr> </table> </div> <script> function ShowData(val,count1,count2,NoteTitleList,NoteDesc) { let tbl=document.getElementsByTagName("table"); let InsideTable = tbl[0].innerHTML; let dataCount=count1; let NoteTitleListCount=count2; if(dataCount<val){ for(i=0;i<dataCount;i++){ InsideTable += `<tr class="TableData"><td>${i}</td><td>${NoteTitleList[i]}</td><td>${NoteDesc[i]}</td><td><button class="btn newbtn">Edit</button><button class="btn newbtn">Delete</button></td></tr>`; } tbl[0].innerHTML=InsideTable; } else{ for(i=0;i<val;i++){ InsideTable += `<tr class="TableData"><td>${i}</td><td>${NoteTitleList[i]}</td><td>${NoteDesc[i]}</td><td><button class="btn newbtn">Edit</button><button class="btn newbtn">Delete</button></td></tr>`; } tbl[0].innerHTML=InsideTable; } } </script> </body> </html> 
