Dependant Drop Downs To Pass JavaScript Variable to PHP

Hi EE,

I'm struggling to get these dependant drop downs to work, I can create the first drop down based on a sql query fine, however getting the picked option from that to then be passed back and used in the second sql query a real pain.

i've tried using AJAX (Never heard of it till today) to pass the javascript option value out and back in again as php but I think I'm missing something on how this is done because I can never get the second dropdown to populate at all.

Thank you for your help


<?php include 'connection.php'; ?>
<html> 
<head> 
<title>Service</title> 

<script type="text/javascript">

window.onerror=function(msg, url, linenumber){
 alert('Error message: '+msg+'\nURL: '+url+'\nLine Number: '+linenumber)
 return true
}
</script>


<script language="javascript"> 
function setOptions(chosen) { 
alert (chosen);

var selbox = document.myform.selectsite; 
    
selbox.options.length = 0; 

// "SELECT * FROM dbo.OutstandingService where='EngID'"  EngID= Option Value from first dropdown

<?php
	
	$sql2 ="SELECT * FROM dbo.OutstandingService";
	$rs2=odbc_exec($conn,$sql2); 
	$mad = "mad";
    while(odbc_fetch_array($rs2))
	{
  ?>
    selbox.options[selbox.options.length] = new 
	Option('<?php echo odbc_result($rs2,"SiteID")." - ".odbc_result($rs2,"HousHolder")  ?>','<?php echo odbc_result($rs2,"SiteID") ?>');
	<?php } ?>
} 
</script> 


</head> 
<body> 
<form name="myform"><div align="center"> 
  <p>&nbsp;  </p>
  <table width="200" border="1">
    <tr>
      <td><select name="selectengineer" size="1" 
onChange="setOptions(document.myform.selectengineer.options 
[document.myform.selectengineer.selectedIndex].value);">
        <option value="0" selected>Select Engineer</option>
        <?php

$sql='SELECT * from dbo.Enginners ORDER BY Engineer';
$rs=odbc_exec($conn,$sql);
if (!$rs)
  {exit("Error in SQL");}

	while (odbc_fetch_array($rs))

	echo "<option value="."'".odbc_result($rs,"EngID")."'".">".odbc_result($rs,"Engineer")."<BR>";

	

?>
      </select></td>
    </tr>
    <tr>
      <td><select name="selectsite" size="1">
        <option value=" " selected>First select an Enginner</option>
      </select></td>
    </tr>
    <tr>
      <td><input type="button" name="go" value="Value Selected" 
onClick="alert(document.myform.selectsite.options 
[document.myform.selectsite.selectedIndex].value)"></td>
    </tr>
  </table>
  <p><br>
  </p>
</div></form> 
</body> 
</html>

Open in new window

LVL 7
Ross TurnerManagement Information Support AnalystAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
jrm213jrm213Connect With a Mentor Commented:
Hi,

if you want to have your select boxes be dependent like that without refreshing the page then you will need to use something like AJAX or JSON to do it.

I would recommend using a library like AJAX to wrap some of the functionality up for you
http://api.jquery.com/jQuery.ajax/

There are good examples toward the bottom of the page right before the comments.

Basically when your dropdown is changed you will call a function, that function will make a request to another php page on your server via an Asynchronous call.  As part of the AJAX call you tell it what data to send to the page it is calling, that data gets sent as POST data or as part of the URL as URL Parameters, that is your choice. So your page that will query the database for what should be displayed in the second combobox gets the data, makes the request to the database and the results from the database should be ouptut to the screen as xml. Your initial page that made the request will receive that xml as a parameter of it's success function. You then parse that XML and fill your secondary combobox with that data.

It is a little confusing at first but it gets easier
0
 
Ross TurnerManagement Information Support AnalystAuthor Commented:
Hi jrm213jrm213,

Well i nearly got to the brink of madness but i have managed to get my head round it now.

Clever stuff when you get down to it but i think i'm going to have to look at other examples so i can get a better grasp on the coding, however I've managed to get the job done so i'm over the moon.

thank you for your help :)

Ross
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.