The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.
|
 |
|
Dev Shed Forums
> Programming Languages
> PHP Development
|
Cascading form dropdown
Discuss Cascading form dropdown in the PHP Development forum on Dev Shed.
Cascading form dropdown PHP Development forum discussing coding practices, tips on PHP, and other PHP-related topics. PHP is an open source scripting language that has taken the web development industry by storm.
|
|
 |
|
|
|
|
Dev Shed Forums Sponsor:
|
|
|
October 12th, 2012, 08:16 AM
|
|
|
|
Cascading form dropdown
OK, I've been googling this and getting on forums for three days now trying to get a cascading dropdown to work.
It doesn't seem like this should be too hard but I'm just not getting it.
This is a project for work and my deadline is today. I'm not a backend developer so I'm really struggling with this. This is the last really big part of the code I need to get this completed.
I found a forum that had some code that should work but it doesn't for me.
This is the code for the first form dropdown.
PHP Code:
$flight_sql = "SELECT * FROM wp_flr_flights";
$flight_result = mysql_query($flight_sql);
echo '<select name="location" id="select-location" onChange="changeSecond(this.value)">';
echo '<option value="">Select</option>';
while ($flt_loc_rows = mysql_fetch_assoc($flight_result)) {
$loc_id = $flt_loc_rows["location_id"];
$loc_name = $flt_loc_rows["location_name"];
echo '<option value="'.$loc_id.'">'.$loc_name.'</option>';
}
echo '</select>';
That works just fine.
here's the JavaScript that is supposed to populate the other dropdown based on the value from the first.
Code:
function changeSecond(first){
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var res=xmlhttp.responseText;
document.getElementById("second").innerHTML=res;
}
}
xmlhttp.open("GET","reservations-plane.php?first="+first,true);
xmlhttp.send();
}
The value does get to the JavaScript. I tested it with an alert., but it doesn't do anything for the second dropdown.
Here's the code from the reservations-plane.php
PHP Code:
global $wpdb, $page_url;
$location= $_REQUEST["first"];
echo $location;
$flight_sql = "SELECT ".$location." FROM wp_flr_flights GROUP BY ".$location;
$flight_result = mysql_query($flight_sql);
echo '<select name="plane_type_choose">';
while ($flt_plane_rows = mysql_fetch_row($flight_result)) {
$plain_id = $flt_plane_rows["plane_id"];
$plane_type = $flt_plane_rows["plane_type"];
echo '<option value="'.$flt_plane_rows[0].'">'.$flt_plane_rows[0].'</option>';
}
echo '</select>';
This is what the example had and others on the forum said they got it working.
This doesn't seem right to me. Because I need to display information from all the rows that have the "location_id" from the first drop down, and the variable $location is just a number. It seems like the query should be more like
PHP Code:
"SELECT location_id FROM wp_flr_flights GROUP BY location_id Where location_id = {'".$location."'}";
And from what the post said the JavaScript is supposed to populate this element on the main form from the code in reservations-plane.php
Code:
<div id="second"><select><option value=""></option></select></div>
I've hit a brick wall here and really need some help. I was able to get a test to work where the dropdown were static, but I need everything to come dynamically from a database. I think that's where I'm having trouble, or it's the Ajax. I never really understood how Ajax works.
So if there's is anyone that can help me with this I's really appreciate it.
|
October 12th, 2012, 08:24 AM
|
 |
Confused badger
|
|
Join Date: Mar 2009
Location: West Yorkshire
|
|
In reservations-plane.php, does anything get echo'd when you echo $location?
Also, change $location= $_ REQUEST["first"]; to $location= $_ GET["first"];
You may wish to put into reservations-plane.php the following (at the top of the page)
PHP Code:
echo "<pre>"; print_r($_GET); echo "</pre>";
To ensure the GET variables are coming over to it OK (or not).
Once you've done that, let us know the outcome 
__________________
The number for UK Emergencies is changing, the new number is 0118 999 881 999 119 7253
"For if leisure and security were enjoyed by all alike, the great mass of human beings who are normally stupefied by poverty would become literate and would learn to think for themselves; and when once they had done this, they would sooner or later realise that the privileged minority had no function and they would sweep it away"
- George Orwell, 1984
|
October 12th, 2012, 08:57 AM
|
|
|
|
Yeah, I'm not getting anything at all.Like it's not even loading.
|
October 12th, 2012, 09:12 AM
|
|
Confused badger
|
|
Join Date: Mar 2009
Location: West Yorkshire
|
|
Quote: | Originally Posted by gilgimech Yeah, I'm not getting anything at all.Like it's not even loading. |
Ok, to eliminate any coding errors in reservations-plane.php do the following:-
Rename reservations-plane.php to reservations-plane.php.old
Create a new file called reservations-plane.php and just have the code below in it ...
PHP Code:
<?php
echo "<pre>";
print_r($_GET);
echo "</pre>";
?>
Then re-try your selection box. Do you then get anything on-screen?
|
October 12th, 2012, 09:33 AM
|
|
|
|
OK, got the page working ( it was a WordPress thing)
this is what I'm getting
Array
(
[page] => flr-reservations-plane
)
the flr-reservations-plane is the table I want to be pulling data from
|
October 12th, 2012, 09:53 AM
|
|
Confused badger
|
|
Join Date: Mar 2009
Location: West Yorkshire
|
|
Quote: | Originally Posted by gilgimech OK, got the page working ( it was a WordPress thing)
this is what I'm getting
Array
(
[page] => flr-reservations-plane
)
the flr-reservations-plane is the table I want to be pulling data from |
If that's the case then the GET variable isn't being set with Ajax; the javascript looks OK to me I'd have expected you to get something like this:-
Array
(
[first] => 1
)
(where 1 is the ID of the element selected in the first selection drop-down)
OK, in your Ajax / javascript, replace these lines:-
Code:
xmlhttp.open("GET","reservations-plane.php?first="+first,true);
xmlhttp.send();
With:-
Code:
xmlhttp.open("POST",""reservations-plane.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("first=" + first);
When done, in your reservations-plane.php, change the line:
To:-
And please re-post what you get then
|
October 12th, 2012, 10:06 AM
|
|
|
I made the changes.
Now I'm getting an empty array
|
October 12th, 2012, 12:06 PM
|
|
|
|
I'm pretty sure the array on reservations-plane.php is empty because there's nothing being posted to it.
How can I test it if there on two separate pages?
If you were meaning that the test echo should show on the main form page it never did. I only say it when I went to the reservations-plane.php page itself. That could be the problem.
|
October 12th, 2012, 12:40 PM
|
|
Confused badger
|
|
Join Date: Mar 2009
Location: West Yorkshire
|
|
gilgimech
Imagine that you have two PHP files:-
form.php
process.php
In a typical situation, the form held on form.php would submit (using POST or GET) the form values to process.php. Process.php would do something with the data, for example, show another HTML SELECT element with different options - e.g. the form would say "select car manufacturer" and the SELECT element on process.php would ask you to select the car model, the list of models would in this example be limited to those of the previously selected manufacturer.
In the Ajax scenario, the form data is submitted but process.php is loaded into a HTML DIV element instead. That way, the whole page does not need to be refreshed.
Regardless of if you're using the two-page approach or the single page with Ajax approach, the selected data is sent to process.php using HTTP GET or POST methods exactly the same and you should be able to show the data that is sent by using print_r($_GET); or print_r($_POST); in process.php.
For some reason though, in your process.php (or "reservations-plane.php"), doing either shows nothing being passed but it DOES show that something is happening (because if nothing was happening, you wouldn't get the 'Array ()' displayed on screen at all).
Whenever I am working with form.php and process.php the only code I start off with is the print_r statement (usually print_r($_POST)  and ensure that something is being sent, if it is, great I get on with writing the rest of the script but if not, I check my Ajax code and ensure it's correct.
Code:
function showHint(mydata) {
var engine = "process.php";
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState!=4) {
document.getElementById("txtHint").innerHTML="<img src='/images/loading.gif' border=0>";
}
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txtHint").innerHTML= xmlhttp.responseText;
}
}
xmlhttp.open("POST",engine,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("search=" + mydata);
}
The code above is my known-working Ajax, a SELECT element will have onchange='showHint(\"something\");' and in my process.php I can happily echo $_POST['search'] to show the "something" that is being thrown at it.
All the code you posted originally looks OK as if it should work which is puzzling me somewhat. It may be worth just writing yourself two new, test files "form.php" and "process.php" to practice Ajax with, then again, maybe not.
I hope this info's been useful, but I really can't figure out why it's not working for you, sorry 
|
October 12th, 2012, 01:36 PM
|
|
|
Quote: | Originally Posted by badger_fruit gilgimech
Imagine that you have two PHP files:-
form.php
process.php
In a typical situation, the form held on form.php would submit (using POST or GET) the form values to process.php. Process.php would do something with the data, for example, show another HTML SELECT element with different options - e.g. the form would say "select car manufacturer" and the SELECT element on process.php would ask you to select the car model, the list of models would in this example be limited to those of the previously selected manufacturer.
In the Ajax scenario, the form data is submitted but process.php is loaded into a HTML DIV element instead. That way, the whole page does not need to be refreshed.
Regardless of if you're using the two-page approach or the single page with Ajax approach, the selected data is sent to process.php using HTTP GET or POST methods exactly the same and you should be able to show the data that is sent by using print_r($_GET); or print_r($_POST); in process.php.
For some reason though, in your process.php (or "reservations-plane.php"), doing either shows nothing being passed but it DOES show that something is happening (because if nothing was happening, you wouldn't get the 'Array ()' displayed on screen at all).
Whenever I am working with form.php and process.php the only code I start off with is the print_r statement (usually print_r($_POST) and ensure that something is being sent, if it is, great I get on with writing the rest of the script but if not, I check my Ajax code and ensure it's correct.
Code:
function showHint(mydata) {
var engine = "process.php";
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState!=4) {
document.getElementById("txtHint").innerHTML="<img src='/images/loading.gif' border=0>";
}
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txtHint").innerHTML= xmlhttp.responseText;
}
}
xmlhttp.open("POST",engine,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("search=" + mydata);
}
The code above is my known-working Ajax, a SELECT element will have onchange='showHint(\"something\");' and in my process.php I can happily echo $_POST['search'] to show the "something" that is being thrown at it.
All the code you posted originally looks OK as if it should work which is puzzling me somewhat. It may be worth just writing yourself two new, test files "form.php" and "process.php" to practice Ajax with, then again, maybe not.
I hope this info's been useful, but I really can't figure out why it's not working for you, sorry |
No Prob. Thanks for trying.
|
October 12th, 2012, 02:44 PM
|
|
|
OH, WOW!
I'm a freakin moron.
This is a wordpress plugin. The reason it did seem to run was because
Code:
xmlhttp.open("GET","reservations-plane.php?first="+first,true);
should have been this
Code:
xmlhttp.open("GET","<?php echo WP_PLUGIN_URL .'/'. $plugin_folder ?>/admin/reservations-plane.php?first="+first,true);
I guess I've been fighting with this so long I forgot the basics.
|
October 12th, 2012, 02:57 PM
|
|
|
OK,
Making some headway.
Now I just think there's something off with my query.
I'm getting
Code:
mysql_fetch_row() expects parameter 1 to be resource....
In the second select element.
|
October 12th, 2012, 06:09 PM
|
 |
Lost in code
|
|
|
|
|
That probably means your SQL query failed for some reason. The mysql_error() function will tell you why.
|
Developer Shed Advertisers and Affiliates
| Thread Tools |
Search this Thread |
|
|
|
| Display Modes |
Rate This Thread |
 Linear Mode
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
