[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Dependant Drop Downs To Pass JavaScript Variable to PHP

Posted on 2012-03-26
2
Medium Priority
?
414 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 2000 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 does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
It’s a season to be thankful, and we’re thankful for users like you who engage on site, solve technology problems, and network with others in the industry. What tech are we most thankful for? Keep reading.
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…
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)
Suggested Courses
Course of the Month20 days, 13 hours left to enroll

864 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