Solved

Dependant Drop Downs To Pass JavaScript Variable to PHP

Posted on 2012-03-26
2
402 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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

746 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

10 Experts available now in Live!

Get 1:1 Help Now