CODEWITHSUNDEEP
phpmysqlajax
Syed Ibrahim
Syed Ibrahim

Reputation: 583

Prepopulate state details for appropriate country using ajax in PHP

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

Answers (1)

Amit Deshmukh
Amit Deshmukh

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

Related Questions