#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2010
    Posts
    46
    Rep Power
    10

    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.
  2. #2
  3. Confused badger
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2009
    Location
    West Yorkshire
    Posts
    1,184
    Rep Power
    492
    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
    "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
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2010
    Posts
    46
    Rep Power
    10
    Yeah, I'm not getting anything at all.Like it's not even loading.
  6. #4
  7. Confused badger
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2009
    Location
    West Yorkshire
    Posts
    1,184
    Rep Power
    492
    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?
    "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
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2010
    Posts
    46
    Rep Power
    10
    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
  10. #6
  11. Confused badger
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2009
    Location
    West Yorkshire
    Posts
    1,184
    Rep Power
    492
    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:

    PHP Code:
    print_r($_GET); 
    To:-

    PHP Code:
    print_r($_POST); 
    And please re-post what you get then
    "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
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2010
    Posts
    46
    Rep Power
    10
    I made the changes.

    Now I'm getting an empty array

    Code:
    Array
    (
    )
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2010
    Posts
    46
    Rep Power
    10
    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.
  16. #9
  17. Confused badger
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2009
    Location
    West Yorkshire
    Posts
    1,184
    Rep Power
    492
    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
    "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
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2010
    Posts
    46
    Rep Power
    10
    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.
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2010
    Posts
    46
    Rep Power
    10
    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.
  22. #12
  23. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2010
    Posts
    46
    Rep Power
    10
    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.
  24. #13
  25. No Profile Picture
    Lost in code
    Devshed Supreme Being (6500+ posts)

    Join Date
    Dec 2004
    Posts
    8,316
    Rep Power
    7171
    That probably means your SQL query failed for some reason. The mysql_error() function will tell you why.
    PHP FAQ

    Originally Posted by Spad
    Ah USB, the only rectangular connector where you have to make 3 attempts before you get it the right way around

IMN logo majestic logo threadwatch logo seochat tools logo