Repopulate selectbox depending on choice made in other.

Ask about general coding issues or problems here.

Moderators: macek, egami, gesf

Post Reply
User avatar
hinkeltje
New php-forum User
New php-forum User
Posts: 15
Joined: Thu Aug 25, 2011 10:51 pm

Repopulate selectbox depending on choice made in other.

Post by hinkeltje » Tue Sep 11, 2012 5:29 am

I am trying to find out how to repopulate a selectbox depending on the value chosen in the previous selectbox.

To be specific:
I have a table customer (customerid, customername) and a table contact (contactid, customerid, contactname).
Depending on the customer that is chosen in the first selectbox I want to repopulate the second selectbox with only the appropriate contact persons belonging to the specific customer.

But since PHP is a server sided language, I probably can't fix this with PHP.

I hope there is someone who can help me with this.

kyle04
New php-forum User
New php-forum User
Posts: 94
Joined: Sat Jul 07, 2012 1:36 pm

Re: Repopulate selectbox depending on choice made in other.

Post by kyle04 » Wed Sep 12, 2012 6:32 am

You will need an ajax type function, triggered by the onchange event in the first select list.
The function should call a php script which can sort the data needed from the select list value, then return the values to the second select list :


<script type="text/javascript">
function getHTTPObject() { // set up the remote call
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject){
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
if (!xmlhttp){
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
}
return xmlhttp;
}

function call_your_script() { //call your php script to get second select box values
http = getHTTPObject();
var sel = document.getElementById("selectname"); // id of 1st select list
var sel_value = sel.options[sel.selectedIndex].value; // value of selected value
var arr_url = "myscript.php?select_value="+sel_value; // php script address based on select value

http.open("GET", arr_url, false);
http.send(null);
var results = http.responseText;

// second list generated here, you can display it on the page using javascript

}
</script>

So
<select id="selectname" onchange="call_your_script();"> // will trigger above script to call the php script

<?php

$select_value = $_REQUEST['select_value'];

...do some database stuff here to generate a second select list of contacts based on the $select_value

use echo to generate the second list


?>

User avatar
hinkeltje
New php-forum User
New php-forum User
Posts: 15
Joined: Thu Aug 25, 2011 10:51 pm

Re: Repopulate selectbox depending on choice made in other.

Post by hinkeltje » Thu Sep 13, 2012 3:34 am

Hi Kyle,

Thank you for your help. Thanks to your example I am now almost there.

Just one question left:

var results containes the correct data.
But how do I get this data on the right place in my HTML / PHP document?

Hope you are willing to help me one more time.

kyle04
New php-forum User
New php-forum User
Posts: 94
Joined: Sat Jul 07, 2012 1:36 pm

Re: Repopulate selectbox depending on choice made in other.

Post by kyle04 » Fri Sep 14, 2012 6:01 am

You have do display the data generated by the php script, something like :


...............

http.open("GET", arr_url, false);
http.send(null);
var results = http.responseText; // the php generated select list

document.getElementById('my_select_box_container_div').innerHTML=results;
document.getElementById('my_select_box_container_div').style.display="block";
</script>

You second select list box will be in an initially hidden div :

<div id="my_select_box_container_div" style="display:none;"></div>

When the ajax call is made the results (ie the second generated select list) should appear on the page in the div container. The above javascript fills the div container with the select list (the innerHTML part), then switches the display property to "block". The second part is optional, the initial div display can be set to block, it depends how you want the results to appear on the page. Take care with correct syntax as javascript gives no error warnings if it dosen't work.
The beauty of this type of function is that the user dosen't leave the page being viewed - the work is done behind the scenes and the specific data is displayed as if by magic !
Good luck !

AndyP

seandisanti
php-forum Fan User
php-forum Fan User
Posts: 973
Joined: Mon Oct 01, 2012 12:32 pm

Re: Repopulate selectbox depending on choice made in other.

Post by seandisanti » Thu Feb 28, 2013 3:40 pm

calling a javascript function from php:

Code: Select all

<!DOCTYPE html>
<html>
<?php echo '<script>alert("blah");</script>'; ?>
</html> 

Post Reply

Who is online

Users browsing this forum: No registered users and 2 guests