Get selected drop down box value via ajax
Posted: Thu Jul 21, 2011 7:59 pm
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
This is my ajax code
Please help me..
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 "?>
<?php
}
?>
</option>
</select>
<?php
?>
</td>
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;
}
}
}