Drop down with ajax in php

I am having a problem with my dependent drop down selector.
The first select works fine, but the next does not.
I have attached all the scripts here.

I have worked on this all day and can't find the bug.
I have problem with attachments so I will put the scripts here.
=============TripleAjaxDropdown.php==============
<!DOCTYPE html>
<head>
<title>Triple Ajax dropdown code</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript">

function getXMLHTTP() { //fuction to return the xml http object
		var xmlhttp=false;	
		try{
			xmlhttp=new XMLHttpRequest();
		}
		catch(e)	{		
			try{			
				xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch(e){
				try{
				xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
				}
				catch(e1){
					xmlhttp=false;
				}
			}
		}
		 	
		return xmlhttp;
}
	
function getAscContractor(AscName) {			
		var strURL="FindAscContractor.php?AscName="+AscName;
		var req = getXMLHTTP();
		
		if (req) {
			
			req.onreadystatechange = function() {
				if (req.readyState == 4) {
					// only if "OK"
					if (req.status == 200) {						
						document.getElementById('AscContractorDiv').innerHTML=req.responseText;						
					} else {
						alert("There was a problem while using XMLHTTP:\n" + req.statusText);
					}
				}				
			}			
			req.open("GET", strURL, true);
			req.send(null);
		}		
}
	
function getAscContractorContact(AscName,AscContractor) {		
		var strURL="FindAscContractorContact.php?AscName="+AscName+"&AscContractor="+AscContractor;
		var req = getXMLHTTP();
		
		if (req) {
			
			req.onreadystatechange = function() {
				if (req.readyState == 4) {
					// only if "OK"
					if (req.status == 200) {						
						document.getElementById('AscContractorContactDiv').innerHTML=req.responseText;						
					} else {
						alert("There was a problem while using XMLHTTP:\n" + req.statusText);
					}
				}				
			}			
			req.open("GET", strURL, true);
			req.send(null);
		}
				
}
</script>
</head>
<body>
<form method="post" action="" name="form1">
<table width="60%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="150">Asc Name</td>
    <td  width="150"><select name="AscName" onChange="getAscContractor(this.value)">
	<option value="">Select Asc Name</option>
	<option value="Telstra">Telstra</option>
	<option value="Optus">Optus</option>
        </select></td>
  </tr>
  <tr style="">
    <td>Asc Contractor</td>
    <td ><div id="AscContractorDiv"><select name="AscContractor" >
	<option>Select Asc Name First</option>
        </select></div></td>
  </tr>
  <tr style="">
    <td>Asc Contractor Contact</td>
    <td ><div id="AscContractorContactDiv"><select name="AscContractorContact">
	<option>Select Asc Contractor First</option>
        </select></div></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</form>
</body>
</html>

Open in new window

=====================FindAscContractor.php==============
<?php

$AscName = $_GET['AscName'];

//mysql connection string
$query = "select distinct AscContractor
from AscContactDetails
where AscName = '$AscName'
"
;
$result=mysql_query($query);
?>

<select name="AscContractor" onchange="getAscContractorContact(<?=$AscName?>,this.value)">
<option>Select a Contractor</option>
<? while($row=mysql_fetch_array($result)) { ?>
<option value=<?=$row['AscContractor']?>><?=$row['AscContractor']?></option>
<? } ?>
</select>

Open in new window

================FindAscContractorContact.php===========================
<?php
$AscName = $_GET['AscName'];
$AscContractor = $_GET['AscContractor'];

//$AscName="Telstra";
//$AscContractor="Telstra";

//mysql connection string here

$query = "select distinct AscContractorContact
from AscContactDetails
where AscName = '$AscName' 
and AscContractor = '$AscContractor'"
;

$result=mysql_query($query);
?>
<select name="AscContractorContact">
<option>Select Contractor Contact</option>
<? while($row=mysql_fetch_array($result)) { ?>
<option value><?=$row['AscContractorContact']?></option>
<? } ?>
</select>

Open in new window

adokliAsked:
Who is Participating?
 
Chris StanyonCommented:
OK. Firstly, I would just say that all of your code seems a little dated - that was how things were done a while back, but these days - not so much. It will make your life a whole lot easier if you start using a JS library - jQuery makes AJAX requests a single liner, and handles the cross-browser issues.

You PHP scripts are using shorttags, which is not really considered best-practice - I think the default these days is to have short tags turned off. Make sure your opening php tags are written in full <?php - and your echo statements are written in full . Also, the mysql database extension is deprecated and due to be made obsolete - you should switch to using MySQLi or PDO immediately.

Right - onto your problem. In your FindAscContractor.php script, wrap the argument to the onChange function in single quotes:

onchange="getAscContractorContact('<?php echo $AscName ?>',this.value)"

Open in new window


You'll also need to wrap the <option> values in quotes:

<option value='<?php echo $row['AscContractor'] ?>'><?php echo $row['AscContractor'] ?></option>

Open in new window

0
 
Marco GasiFreelancerCommented:
I'm not sure, because I use jQuery to perform Ajax request, but your php script are not returning nor echoing anything. Try to do this:

<?php

$AscName = $_GET['AscName'];

//mysql connection string
$query = "select distinct AscContractor
from AscContactDetails
where AscName = '$AscName'
"
;
$result=mysql_query($query);

$res =<<< RES
<select name="AscContractor" onchange="getAscContractorContact($AscName?,this.value)">
<option>Select a Contractor</option>
RES;
while($row=mysql_fetch_array($result)) {
$res .= <<<RES
<option value=$row['AscContractor']>$row['AscContractor']</option>
RES;
}
$res .= "</select>";
echo $res;

Open in new window

You have to put all in a variable and then echo that variable.
0
 
adokliAuthor Commented:
Thanks Chris. You made my day. The quotes did the trick. I am quite new to PHP  so I will heed to your advice and start learning jquery and mysqli.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.