There is a select field of a form (use to update the existing data) which takes the input option(state) from a database table and based on that value it automatically fills the value of another field(region) using ajax. I am facing two problems with this code.
1.Any option selected on the first field(state) always gives the output value(rid) as ‘7’ whereas different options are having different value.The value(rid) should be corresponding to the option.
2. AJAX send the value 7 by post method and result is corresponding to the value ‘7’ but is not getting filled in the other option(region)
Kindly help me to find any solution of this –
My tblregion is like this
Table Image
<div class="col-md-4 form-group"style="padding-right:0px;" >
<div class="form-group">
<label for="Region" >State</label>
<?php
$sql="select rid,statename,region from tblregion order by statename";
$stmt=$dbh->prepare($sql);
$stmt->execute();
$arrstate=$stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<select class="form-control" name="state" id="state1" onchange="onStateChange()">
<option value="<?php echo htmlentities($result->rid);?>"><?php echo htmlentities($result->statename);?></option>
<?php
foreach($arrstate as $state){
?>
<option value="<?php echo $state['rid']?>"><?php echo $state['statename']?></option>
<?php
}
?>
</select>
</div></div>
<div class="col-md-2 form-group" style="padding-left:0px;">
<label for="Region" >Region</label>
<select class="form-control" name="Region" id="region" readonly>
<option>Region</option>
</select>
</div>
My ajax is working fine. The code for java script is
<script>
function onStateChange() {
var rid = jQuery(state1).val();
alert(rid);
jQuery.ajax({
type: "post",
url: "get_data.php",
data: "id=" + rid,
success: function (result) {
jQuery('#region').html(result);
//var oput = 'result';
alert(result);
//document.getElementById('region').value =result;
},
});
}
</script>