Solved

Dependant Drop Downs To Pass JavaScript Variable to PHP

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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
This article discusses how to create an extensible mechanism for linked drop downs.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
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.

792 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