I've encountered an issue with the code on my admin page. It used to work perfectly fine on my system, but now it seems to have stopped functioning. My client urgently needs to update this page, however, when I attempt to run it, the JQuery requests are not being performed. What the code does is, upon focus or value change of the first dropdown, the other category and subcategory dropdowns get updated via JQuery requests to another PHP file that returns the category values. Additionally, I've tried running the page in different browsers without any success.
There's also a problem posting the code through a code snippet, so here's the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cracktitude-Admin</title>
<script src="scripts/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("form").on('submit',function(event){
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "GET",
url: "admin-adddata.php",
data: data
}).done(function( msg ) {
alert( "Data Saved: " + msg );
location.reload(true);
});
});
});
</script>
<script>
function categorylist(str)
{
if (str=="")
{
document.getElementById("category").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("category").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","admin-getdata.php?choice="+str,true);
xmlhttp.send();
}
</script>
<script>
function subcategorylist(str1)
{
if (str1=="")
{
document.getElementById("subcategory").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("subcategory").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","admin-getdata1.php?choice="+str1,true);
xmlhttp.send();
}
</script>
<style type="text/css">
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
margin: 0;
padding: 0;
color: #333;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;}
a img {
border: none;
}
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 960px;
background-color: #FFF;
margin: 0 auto;
}
.content {
padding: 10px 0;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
form{
font-size:14px;
font-family:Verdana, Geneva, sans-serif;
color:#333;
}
form p{
vertical-align:top;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<h1>Admin Panel</h1>
<form>
<p>Section:
<select name="section" id="section" tabindex="1" onchange="categorylist(this.value)" onfocus="categorylist(this.value)" autofocus="autofocus">
<option value="Aptitude">Aptitude</option>
<option value="1">Engineering</option>
<option value="2">GK</option>
<option value="3">Interview</option>
<option value="4">Puzzle & Mind Games</option>
</select>
</p>
<p>Question:
<textarea name="question" id="question" cols="45" rows="5" tabindex="2" required="required"></textarea>
</p>
<p>Option A:
<input type="text" name="optiona" id="optiona" required="required"/>
</p>
<p>Option B:
<input type="text" name="optionb" id="optionb" required="required"/>
</p>
<p>Option C:
<input type="text" name="optionc" id="optionc" required="required"/>
</p>
<p>Option D:
<input type="text" name="optiond" id="optiond" required="required" />
</p>
<p>Correct Answer:
<label>
<input type="radio" name="answer" value="A" id="answer_0" />
Option A |</label>
<label>
<input type="radio" name="answer" value="B" id="answer_1" />
Option B |</label>
<label>
<input type="radio" name="answer" value="C" id="answer_2" />
Option C |</label>
<label>
<input type="radio" name="answer" value="D" id="answer_3" />
Option D</label>
<br />
</p>
<p>Explanation:
<textarea name="explanation" id="explanation" cols="45" rows="5" required="required"></textarea>
</p>
<p>Category:
<span name="category" id="category">
<select name="cat">
<option></option>
</select>
</span>
</p>
<p>Sub-category:
<span name="subcategory" id="subcategory">
<select name="subcat">
<option></option>
</select>
</span>
</p>
<p>Type:
<select name="type" id="type">
<option value="1">I</option>
<option value="2">II</option>
<option value="3">III</option>
<option value="4">IV</option>
</select>
</p>
<p>
<input type="submit" name="add" id="add" value="Add" />
<input type="reset" name="reset" id="reset" value="Clear" />
</p>
</form>
</div>
<!-- end .container -->
</div>
</body>
</html>