Я новичок в Ajax, и программирование в целом, и я сейчас в разгаре обучения, когда я иду.
Моя цель
В настоящее время я пытаюсь создать раскрывающийся список цепочек с первым выпадающим списком, который заполняется из моей базы данных, а второй раскрывающийся список заполняется на основе выбора пользователя в первом раскрывающемся списке.
Мой код (Страница формы)
<?PHP session_start(); if(@$_SESSION['Auth']!=="Yes") { echo"You are not authorised to view this page.Please click <a href='Login.php'>here</a> to login."; exit(); } ?> <?PHP //Processing Code goes here ?> <!DOCTYPE html> <html> <head> <script> function getcategory() { var xmlhttp; if(window.XMLHttpRequest) { //code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp= new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState==4 && xmlhttp.status==200) { alert("This is an alert 1"); document.getElementById("category").innerHTML=xmlhttp.responseText; } } alert("This is an alert 2"); xmlhttp.open("GET","AddItemCat.php","true"); alert("This is an alert 3"); xmlhttp.send(); alert("This is an alert 4"); } function getsubcategory(cat) { var xmlhttp; if(window.XMLHttpRequest) { //code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp= new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("subcat").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","AddItemSubCat.php?cat="+cat,"true"); xmlhttp.send(); } </script> </head> <body> <form action="<?PHP echo $_SERVER['PHP_SELF'] ?>" name="additem" enctype="multipart/form-data" method="POST"> <table> <tr> <td>Select Category: </td> <td><script>alert("This is an alert 5");</script> <select id="category" onclick="getcategory()"> <script>alert("This is an alert 6");</script> <option id="cat"value=""></option> <script>alert("This is an alert 7");</script> </select> </td> </tr> <tr> <td>Select SubCategory</td> <td> <select id="subcat" onclick="getsubcategory(cat)"> <option value=""></option> </select> </td> </tr> </table> </form> </body> </html> Мой код (AddItemCat.php)
<?PHP session_start(); if(@$_SESSION['Auth']!=="Yes") { echo"You are not authorised to view this page.Please click <a href='Login.php'>here</a> to login."; exit(); } ?> <?PHP if(@$_SESSION['Auth']=="Yes" && @$_SESSION['Type']=="Admin") { include("cxn.inc"); $userid=$_SESSION['UserId'] $branchid=0; $getcat="SELECT * FROM `Categories` WHERE `Business`=$userid AND Branch=$branchid"; $runcat=mysqli_query($cxn,$getcat) or die (mysqli_error($cxn)); while($row=mysqli_fetch_assoc($runcat)) { $cat=$row['Category']; echo"<option value=$cat>$cat</option>"; } } ?>в<?PHP session_start(); if(@$_SESSION['Auth']!=="Yes") { echo"You are not authorised to view this page.Please click <a href='Login.php'>here</a> to login."; exit(); } ?> <?PHP if(@$_SESSION['Auth']=="Yes" && @$_SESSION['Type']=="Admin") { include("cxn.inc"); $userid=$_SESSION['UserId'] $branchid=0; $getcat="SELECT * FROM `Categories` WHERE `Business`=$userid AND Branch=$branchid"; $runcat=mysqli_query($cxn,$getcat) or die (mysqli_error($cxn)); while($row=mysqli_fetch_assoc($runcat)) { $cat=$row['Category']; echo"<option value=$cat>$cat</option>"; } } ?>
Мой код (AddItemSubCat.php)
<?PHP session_start(); if(@$_SESSION['Auth']!=="Yes") { echo"You are not authorised to view this page.Please click <a href='Login.php'>here</a> to login."; exit(); } ?> <?PHP if(@$_SESSION['Auth']=="Yes" && @$_SESSION['Type']=="Admin") { include("cxn.inc"); //Gets the category parameter passed from the URL $cat=$_GET['cat']; $userid=$_SESSION['UserId'] $branchid=0; $getsub="SELECT * FROM `SubCategories` WHERE `Business`=$userid AND Branch=$branchid && Category==$cat"; $runsub=mysqli_query($cxn,$getsub) or die (mysqli_error($cxn)); while($row=mysqli_fetch_assoc($runsub)) { $sub=$row['Category']; echo"<option value=$sub>$sub</option>"; } } ?>в<?PHP session_start(); if(@$_SESSION['Auth']!=="Yes") { echo"You are not authorised to view this page.Please click <a href='Login.php'>here</a> to login."; exit(); } ?> <?PHP if(@$_SESSION['Auth']=="Yes" && @$_SESSION['Type']=="Admin") { include("cxn.inc"); //Gets the category parameter passed from the URL $cat=$_GET['cat']; $userid=$_SESSION['UserId'] $branchid=0; $getsub="SELECT * FROM `SubCategories` WHERE `Business`=$userid AND Branch=$branchid && Category==$cat"; $runsub=mysqli_query($cxn,$getsub) or die (mysqli_error($cxn)); while($row=mysqli_fetch_assoc($runsub)) { $sub=$row['Category']; echo"<option value=$sub>$sub</option>"; } } ?>к<?PHP session_start(); if(@$_SESSION['Auth']!=="Yes") { echo"You are not authorised to view this page.Please click <a href='Login.php'>here</a> to login."; exit(); } ?> <?PHP if(@$_SESSION['Auth']=="Yes" && @$_SESSION['Type']=="Admin") { include("cxn.inc"); //Gets the category parameter passed from the URL $cat=$_GET['cat']; $userid=$_SESSION['UserId'] $branchid=0; $getsub="SELECT * FROM `SubCategories` WHERE `Business`=$userid AND Branch=$branchid && Category==$cat"; $runsub=mysqli_query($cxn,$getsub) or die (mysqli_error($cxn)); while($row=mysqli_fetch_assoc($runsub)) { $sub=$row['Category']; echo"<option value=$sub>$sub</option>"; } } ?>
Ошибки (или, скорее, отсутствие ошибок)
Выпадающие списки моей категории и SubCategory пусты, и ничего не отображается, и я не вижу, что именно WTF – это то, что я сделал неправильно. Могли ли вы любезно указать на мои ошибки и рассказать мне, как их исправить и улучшить? Я смотрел на экран в течение 2 часов, а я не ближе к выяснению своей ошибки, поскольку я вообще не получаю НИКАКОГО (без сообщений об ошибках), просто таблица с двумя раскрывающимися окнами, которые полностью пусты ,
Благодаря!
PS: Моя конечная цель – создать форму, подобную той, которая используется в интернет-магазинах, где пользователь может загрузить элемент вместе с сопровождающими изображениями. Мне еще предстоит добавить остальную часть формы, поскольку в ней нет смысла, так как мои дескрипторы не работают.
EDIT: добавлена таблица на страницу формы, которая отсутствовала раньше. Нет видимых изменений в результатах и я все еще не могу заставить код работать.
EDIT 2: Добавлены различные предупреждения для кода. Только предупреждения 5,6 и 7 работают и выходят, когда я загружаю страницу. Предупреждения в javascript не работают, поэтому проблема явно лежит в функции javascript, хотя я все еще не видно, что такое ошибка.
Я бы порекомендовал 2 изменения –
1. Загрузите параметры выбора категории при загрузке страницы, вместо использования onclick .
-Добавить onload="getcategory()" в тег тела.
2.Загрузите свою подкатегорию, выбрав опции при изменении категории.
onchange="getsubcategory(this)" в ваш <select id="category"> и удалить onclick="getsubcategory(cat)" из вашего <select id="subcat" >
-Тогда используйте var catval = cat.options[cat.selectedIndex].value; в вашей getsubcategory() чтобы получить выбранное значение.
Теперь это будет выглядеть –
... <!DOCTYPE html> <html> <head> <script> function getcategory() { var xmlhttp; if(window.XMLHttpRequest) { //code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp= new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("category").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","AddItemCat.php","true"); xmlhttp.send(); } function getsubcategory(cat) { var xmlhttp; var catval = cat.options[cat.selectedIndex].value; if(window.XMLHttpRequest) { //code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp= new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("subcat").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","AddItemSubCat.php?cat="+catval,"true"); xmlhttp.send(); } </script> </head> <body onload="getcategory()"> <form action="<?PHP echo $_SERVER['PHP_SELF'] ?>" name="additem" enctype="multipart/form-data" method="POST"> <table> <tr> <td>Select Category: </td> <select id="category" onchange="getsubcategory(this)"> <option value=""></option> </select> </td> </tr> <tr> <td>Select SubCategory</td> <td> <select id="subcat"> <option value=""></option> </select> </td> </tr> </table> </form> </body> </html>