I have a page with a form which contains a select box which gets populated from a mysql table through a php function when the page runs. I have added a 2nd list box above the previous one with hard-coded option values (it is located in the same form).
What I want to do is the following: When selecting a value in the hard-coded list box, this value should pass to the function that populates the other list box, i.e. this function should re-run but with the passed value from the hard-coded list box. (The reason I want to do this is that later I will modify the function so that it retrieves a subset of the previously retrieved group of values, i.e. values that are related to the selected value in the hard-coded list box, in other words do a filtering in the previous group of values based on the selected value in the hard-coded list box).
I don't want the form to be submitted with the onChange event on the hard-coded list box because the action of the form refers to a script that I don't want to run when selecting a value in the hard-coded list box, I just want the page to refresh with the filtered values output in the list box below.
I hope I made myself clear. Appreciate any help.
how to pass a value from a list box to a php function
Moderator: General Moderators
Re: how to pass a value from a list box to a php function
There are two ways that you could do this. Split the form into two seperate forms (the hard coded select in the first and the dynamic in the second). When the first form is submitted use php to figure out the second form. Or, you could use ajax (which isn't too difficult) to populate the second select in the same form without the need to submit the form.
Re: how to pass a value from a list box to a php function
ok, I understand the 1st solution with the separate form element but with this solution I think the list box would be output at a different spot in the page, whereas I would like it to appear on the same spot, i.e. just above the other list box (the reason is that since I would make a 2nd form this cannot be nested in the 1st form, it would have to be located above the 1st form and the 1st form contains some other elements as well which would be below the hard-coded list box - containe in the new form, something I wouldn't like. Of course, as a last resort I would use this method and try to find a workaround regarding the location of the hard-coded list box).
On the other hand I want the same php function to continue populating the previously existed list box (say box B) because it is a part of the code of an e-commerce cart, so when the user selects a value in the B list box, the cart outputs a specific product's details to the user (as it has done before). Therefore, the filtered values that I want to output in the B list (not the hard-coded one) have to come from the same function internally so when selected, the cart will continue working as it used to work before (i.e. output a product's details). The only difference is that list box B will output filtered values based on the selected value in list box A. Wouldn't there be a problem with this requirement if I used Ajax ? (i.e. Ajax would populate the B list box in another manner, not dynamically from the database, as the php function of the cart does currently).
On the other hand I want the same php function to continue populating the previously existed list box (say box B) because it is a part of the code of an e-commerce cart, so when the user selects a value in the B list box, the cart outputs a specific product's details to the user (as it has done before). Therefore, the filtered values that I want to output in the B list (not the hard-coded one) have to come from the same function internally so when selected, the cart will continue working as it used to work before (i.e. output a product's details). The only difference is that list box B will output filtered values based on the selected value in list box A. Wouldn't there be a problem with this requirement if I used Ajax ? (i.e. Ajax would populate the B list box in another manner, not dynamically from the database, as the php function of the cart does currently).
Re: how to pass a value from a list box to a php function
If you used the ajax method, you could still probably use the same php function as before (you might have to modify it a bit). Ajax is just a term for javascript communicating with the server (php) without the need to reload the page.
You might want to check out some Ajax tutorials before you decide which way you are going to accomplish this.
You might want to check out some Ajax tutorials before you decide which way you are going to accomplish this.
Re: how to pass a value from a list box to a php function
ok, thanks for the help. I already read a tutorial on Ajax and I think I started getting the picture. As I understand, I will just use the onChange event of the hard-coded list box, so when the user selects a value, this will be sent via the GET method to the php function of the cart that populates the 2nd list box, i.e. basically I will follow the follwoing steps (please correct me if I am wrong).
1) I read the selected value in the hard-coded list box with something like:
2) I pass the selected value as a URL query to the php function that populates the 2nd list box, something like
3) I modify the 2nd_list_box_retrieval_function.php function which populates the 2nd list box so that it outputs the filtered values related to the $selected_value value.
4) From there on, I don't need to do anything else for the output of those values in the 2nd list box, right? The cart function will take care of it as it does already (it might be doing it with Ajax as well, as I have seen some Ajax functionality in the cart). In other words, I won't have to care about capturing any server response since that is already done by the cart application itself, right?
So, there wouldn't be a need to use a separate form to enclose the hard-coded list box, just use event procedures and I wouldldn't have to change the location of the hard-coded list box as well. Is my above thinking right? Do you think I could continue like this? (of course I will read some stuff on Ajax...)
1) I read the selected value in the hard-coded list box with something like:
Code: Select all
selected_value= encodeURIComponent(document.getElementById("hard-coded_list_box_Name").value);Code: Select all
xmlHttp.open("GET", "2nd_list_box_retrieval_function.php?selected_value=" + selected_value, true);4) From there on, I don't need to do anything else for the output of those values in the 2nd list box, right? The cart function will take care of it as it does already (it might be doing it with Ajax as well, as I have seen some Ajax functionality in the cart). In other words, I won't have to care about capturing any server response since that is already done by the cart application itself, right?
So, there wouldn't be a need to use a separate form to enclose the hard-coded list box, just use event procedures and I wouldldn't have to change the location of the hard-coded list box as well. Is my above thinking right? Do you think I could continue like this? (of course I will read some stuff on Ajax...)
Re: how to pass a value from a list box to a php function
ok, after some ajax reading I tried the following:
in the html file I added the hard-coded list box:
and added a reference to my javascript file:
then I created the <filename>.js file:
I don't want to capture the output of the <script_to_run>.php script (which is the cart script that outputs the product details), I just want it to re-run itself (as if refreshing the page) but with the passed selected value this time, so by modifying it, I will use this passed value to filter the output of the product details from the cart, in other words, I just want to use the already existing code of the cart to output the product details, it's just that I want to re-run the script that outputs the product details page with the passed value.
So, my question is what code do I use in the bolded line in the above code listing? I really appreciate some help....
in the html file I added the hard-coded list box:
Code: Select all
<select name="select_list" onChange="capture_value(this.value)">
<option selected="selected" value=0>Select a value</option>
<option value="null">-------------</option>
<option value=1>value 1</option>
<option value=2>value 2</option>
<option value=3>value 3</option>
</select>Code: Select all
<script type="text/javascript" src="<some path>/<filename>.js"></script>Code: Select all
var xmlhttp;
function capture_value(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="http://localhost/<some path>/<script_to_run>.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged()
{
if (client.readyState == 4) {
if (client.status == 200) {
[b]<code to re-run the [i]<script_to_run>.php[/i] script but this time with the passed selected value>[/b]
} else {
alert("Response Error:\n" + client.statusText);
}
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}So, my question is what code do I use in the bolded line in the above code listing? I really appreciate some help....