SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with auto populating a dropdown for form

    I know you can populate a form dropdown with data from a database based on the selection of another dropdown with Ajax.

    I don't have any experience with Ajax, but I need to get this project done for my work.

    If anyone cane help me with this I'd really appreciate it.

    Here is the code for my first dropdown.
    PHP Code:
    <?php 
        $flight_sql 
    "SELECT * FROM wp_flr_flights"
        
    $flight_result mysql_query($flight_sql); 
        echo 
    '<select name="location">'
        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>'
    ?>
    So what I want to happen, is when the dropdown is selected the next three dropdowns on the form are populated based in the $loc_id variable.
    SO every row in the table with (let's say) and $loc_id of 1. The form gets populated on with information from those rows.

    I hope that make sense. I apologize if I posted in the wrong area. I'm not sure if this should be PHP or JavaScript.

    Thanks in advanced

  2. #2
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I found a tutorial online that I mostly understand but the javasrcript doesn't seem to work.

    here's the code
    Code:
    <script>
    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();
    }
    </script>
    <?php
    	$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>';
    ?>
    <div id="second"><select><option value=""></option></select></div>
    reservations-plane.php
    Code:
    <?php
    global $wpdb, $page_url;
    $location=mysql_real_escape_string($_REQUEST["first"]);
    echo $userid.'ddd';
    $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>';
    ?>
    Like I said this seems simple enough to understand, but the Javascript isn't working. I even stuck an alert in there but couldn't get it to work.

    Any ideas about this?


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •