Page 1 of 1

Get selected drop down box value via ajax

Posted: Thu Jul 21, 2011 7:59 pm
by ghjk
In my application I have two drop down boxes. 2nd drop down box should filled according to the selected value on the 1st drop down box. But I have two problems.
1. When I select a value from the 1st drop down box I have got another drop down box same as earlier.
2.The selected value changed. I want to keep the selcted value.
This is my code

test.php

Code: Select all


<?php 
$type=$_GET['Vtype'];
echo $type;
?>
<div id='txtHint'></div>
 
 
<td>Make :</td> 
<td>
 
<select name="Make"  class="normalTxt" onChange='showSelected(this.value); ' id="Make" >
<!--<option value="Select" >Select</option>-->
<?php    $mysql_result1 = mysql_query("SELECT DISTINCT vehicleMake FROM  vehicles");
while($row = mysql_fetch_array($mysql_result1)){
foreach( $row AS $key => $val )
$Make = stripslashes( $val );
 
?>
<option value=<?php  echo  "'$Make'" ?> ><?php echo "$Make&nbsp;&nbsp;&nbsp;"?>
<?php 
}    
?>
</option>
</select>
<?php
 
?>
</td>
This is my ajax code

Code: Select all


    //====================Create Ajax object================================
    function GetXmlHttpObject() {
        var request;
        try {
            request=new XMLHttpRequest();
        }
        catch (e) {
            try {
                request=new ActiveXObject("Msxml2.XMLHTTP");
            }
              catch (e) {
                try {
                    request=new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e) {
                    alert("Your browser does not support AJAX!");
                    return false;
                }
            }
        } 
        return request;
    }
     
    function showSelected(){
     
    var dropdownIndex = document.getElementById('Make').selectedIndex;
    var ttype = document.getElementById('Make'[dropdownIndex].value;
    var request = GetXmlHttpObject();
    var url="test.php";
    url=url+"?Vtype="+ttype+1;
    url=url+"&sid="+Math.random();
    request.onreadystatechange=stateChanged;
    request.open("GET",url,true);
    request.send(null);
    function stateChanged()
      {
     if (request.readyState==4)  
        {                        document.getElementById("txtHint").innerHTML=request.responseText;
     
        }
     }
     
    }
Please help me..