Solved

Dependant Drop Downs To Pass JavaScript Variable to PHP

Posted on 2012-03-26
2
406 Views
Last Modified: 2012-03-26
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

0
Comment
Question by:Ross Turner
2 Comments
 
LVL 17

Accepted Solution

by:
jrm213jrm213 earned 500 total points
ID: 37767968
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
 
LVL 7

Author Closing Comment

by:Ross Turner
ID: 37769005
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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now