Reputation: 583
I need to prepopulate state details in the frmState dropdown box after selecting any country. But I'm new to ajax and I don't have enough knowledge of it. Can you help me in this routine? It's given below. It may worth a lot. Thanks in advance.
I have two tables in mySql..
tbl_country
columns: country_id(auto inc id) | country_name | country_code
tbl_states
columns: state_id(auto inc id) | state_name | country_name
Html code
<select class="txtselectcomp" name="frmCountry" id="frmCountry" onChange="showHint(this.value);" onblur="checkEmptyData('frmCountry');" required="required" >
<option value="">Select country</option>
<?php
for ($i = 0; $i < count($strCountries); $i++) { ?>
<option value="<?php
echo $strCountries[$i]['country_name']; ?>" <?php
if ($_POST['frmCountryName'] == $strCountries[$i]['country_name']) { ?> selected="selected" <?php
} ?>><?php
echo ucfirst($strCountries[$i]['country_name']); ?></option>
<?php
} ?>
</select>
<select class="txtselectcomp" name="frmState" id="frmState" onblur="checkEmptyData('frmState');" required="required" >
<option value="">Select State</option>
</select>
Ajax script
<script language="javascript">
function showHint(str)
{
var xmlhttp;
if (str.length==0) {
document.getElementById("frmState").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 && xmlhttp.status==200) {
document.getElementById("frmState").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","findState.php?value="+str,true);
xmlhttp.send(null);
}
</script>
Functions
$strCountries = doSelectRecordsById('tbl_country', 'country_id, country_name', 'country_id', ' order by country_name ASC', '');
function doSelectRecordsById($strTableName, $strSelect='*', $strTableId, $strOrderBy = NULL, $strFieldValue = NULL)
{
if ($strFieldValue != NULL) {
$strWhereClause = " WHERE $strTableId = '".(int)$strFieldValue."'";
}
$strSqlRecords = "SELECT $strSelect FROM $strTableName $strOrderBy $strWhereClause";
$strSqlData = SelectQry($strSqlRecords);
if ($strWhereClause == '') {
return $strSqlData;
} else {
return $strSqlData[0];
}
}
function doSelectState($strIdent)
{
$strSelectsSql = "Select * from tbl_states Where country_name='".$strIdent."' ";
$strSelectsResult = SelectQry($strSelectsSql);
return $strSelectsResult[0];
}
findState.php
<?php
include ("config.php");
$country_name = $_GET["value"];
$sql = doSelectState($country_name);
?>
<select name="State" id="State">
<?php
for ($i = 0; $i < count($sql); $i++) {
$id = $sql[$i]['state_id'];
$state = $sql[$i]['state_name'];
echo '<option value="' . $id . '">' . $state . '</option>';
}
?>
</select>
Upvotes: 0
Views: 281
Reputation: 23
<?php
include ("config.php");
$country_name = $_GET["value"];
$sql = doSelectState($country_name);
?>
<select name="State" id="State">
<?php
for ($i = 0; $i < count($sql); $i++) {
$id = $sql[$i]['state_id'];
$state = $sql[$i]['state_name'];
echo '<option value="' . $id . '">' . $state . '</option>';
}
?>
Here you dont have to create a select element. you can just do it like
<?php
include ("config.php");
$country_name = $_GET["value"];
$sql = doSelectState($country_name);
for ($i = 0; $i < count($sql); $i++) {
$id = $sql[$i]['state_id'];
$state = $sql[$i]['state_name'];
echo '<option value="' . $id . '">' . $state . '</option>';
}
?>
so that when returning data to browser you will get the option fields and not the select which can be inner html for select. What you are trying to do right now is inserting SELECT element in to select element
Upvotes: 1