Countries States and Cities Drop Down

Question

I am new to Ajax and PHP and am encountering problems with a dynamic drop down of states and cities. Although I have checked whole lot of answers in stackOverflow but I am not able to get a clear picture as to how we should successfully code to get the desired results.

Problem: Not able to get drop down values for cities, countries and states are successfully getting populated though.

country_back.php [Dynamically generates a drop down for states using country_id]

<?php 

 $con_id=$_POST['id'];


 $con=mysqli_connect("localhost","root","","countries");
 $data=mysqli_query($con,"select * from states where country_id='$con_id' ");
 echo "<select id='st'>";
 while($row=mysqli_fetch_array($data))
   {
     echo "<option value=".$row['id'].">".$row['name']."</option>"; 
   }
 echo "</select>";



?>

ajax file

$("#st").change(function(){
        var s=$(this).val();
        alert(s);   //no value being shown with alert.
        $.ajax=({
            url:"state_back.php",
            method:"post",
            data:{stid:s},
            dataType:"html",
            success:function(strMsg){
                $("#city").html(strMsg);

                }

            })

        })

HTML Form

<form method="post">

<div id="city">
<select>
<option>Cities</option>
</select>
</div>
</form>

state_back.php Dynamically generates a drop down for cities using state_id

<?php

$stid=$_POST['stid'];

$con=mysqli_connect("localhost","root","","countries");
$data=mysqli_query($con,"select * from cities where state_id='$stid' ");
echo "<select>";
while($row=mysqli_fetch_array($data))
{
    echo "<option>".$row['name']."</option>";
}
echo "</select>";


?>

@NikitaAgrawal Hi again, Not able to get drop down values for cities — Don'tDownvoteMe, Feb 20 '18 at 07:19
is it `state_back.php` or `states_back.php` ~ note the extra `s` — Professor Abronsius, Feb 20 '18 at 07:19
@RamRaider it is `state_back.php`, corrected the same in the question, thanks. But problem persists. — Don'tDownvoteMe, Feb 20 '18 at 07:21
`$('#st').val();` can you check with this code that is it giving any value. — Nikita Agrawal, Feb 20 '18 at 07:26
@NikitaAgrawal tried `$("#st").change(function(){ alert("hello");` but not getting any results. — Don'tDownvoteMe, Feb 20 '18 at 07:29
@MehravishTemkar I have 3 drop downs in the form and supposedly your code will be triggered if the state changes in any one of them whereas I want only the code to trigger when this particular drop down in question is used. — Don'tDownvoteMe, Feb 20 '18 at 07:32
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Mehravish Temkar, Feb 20 '18 at 08:10

score 1 · Accepted Answer · answered Feb 20 '18 at 07:28

1

Change your ajax code :

   $(document).on('change', '#st', function(e){
        var s=$('#st').val();
        alert(s);   //no value being shown with alert.
        $.ajax({
            url:"state_back.php",
            method:"post",
            data:{stid:s},
            dataType:"html",
            success:function(strMsg){
                alert(strMsg);
                $("#city").html(strMsg);
                }
            });
        });

answered Feb 20 '18 at 07:28

Nikita Agrawal

235
1
11

the event is `onchange` – Nikita Agrawal Feb 20 '18 at 07:37
But I used `change` event in the previous work when I was trying to populate the drop down for states and it worked perfectly fine. – Don'tDownvoteMe Feb 20 '18 at 07:38
@MehravishTemkar you asked me to select the entire form $('form').... which is when I said it wouldn't work but Nikita did the code and it is more comprehensible. Sorry and thanks! – Don'tDownvoteMe Feb 20 '18 at 07:53
1

$('form').on('change', '#st', function(e){ ==> is what I said and is the better way – Mehravish Temkar Feb 20 '18 at 07:54
1

select entire form lol :P but you can traverse all the way to "document"? – Mehravish Temkar Feb 20 '18 at 07:55

score 0 · Answer 2 · answered Feb 20 '18 at 07:32

0

Instead of var s=$(this).val(); line try

var s=$('#st option:selected').val();

alert(s);

answered Feb 20 '18 at 07:32

Anil Kumar Sahu

567
2
7
27

Tried but no result. – Don'tDownvoteMe Feb 20 '18 at 07:33
put ; semicolon after function completed. – Anil Kumar Sahu Feb 20 '18 at 07:35

score 0 · Answer 3 · edited Aug 01 '22 at 08:44

No need of API just import SQL and use this simple code. This is fetching details from sql database (Only contain indian states and cities).

Most of the cities are available but not sure about all the cities but with this you can get idea of using select tag.

sql link->https://github.com/Pankaj-singh-tech/indiancities/tree/main

<form method="post">
  <select name="state" id="state" onchange="form.submit()">
    <?php
      echo "<option value=''>SELECT STATE</option>";
      $sql="SELECT * FROM state";
      $result=mysqli_query($conn,$sql);
      if (!$result) {
         echo "<option value=''>failed to fetch sates</option>";
      }
      while ($row=mysqli_fetch_array($result)) {
        echo "<option value='$row[state_id]' id='state$row[state_id]'>$row[state_title]</option>";
      }
      if (isset($_POST['state'])) {
        $state_id=$_POST['state'];
      }
    ?>
  </select>
  <select name="district" id="district" onchange="form.submit()">
    <?php
      echo "<option value=''>SELECT DISTRICT</option>";
      $sql2="SELECT * FROM district WHERE state_id='$state_id'";
      $result2=mysqli_query($conn,$sql2);
      if (!$result2) {
        echo "<option value=''>failed to fetch district</option>";
      }
      while ($row2=mysqli_fetch_array($result2)) {
        echo "<option value='$row2[district_id]' id='district$row2[district_id]'>$row2[district_title]</option>";
      }
      if (isset($_POST['district'])) {
        $district_id=$_POST['district'];
      }
    ?>
  </select>
  <select name="city" id="city" onchange="form.submit()">
    <?php
      echo "<option value=''>SELECT CITY</option>";
      $sql3="SELECT * FROM city WHERE state_id='$state_id' AND district_id='$district_id'";
      $result3=mysqli_query($conn,$sql3);

      if (!$result3) {
        echo "<option value=''>failed to fetch city</option>";
      }
      while ($row3=mysqli_fetch_array($result3)) {
        echo "<option value='$row3[city_id]' id='city$row3[city_id]'>$row3[city_title]</option>";
      }
      if (isset($_POST['city'])) {
        $city_id=$_POST['city'];
      }
    ?>
  </select>
</form>

<script>
  document.getElementById('<?php echo "state$state_id"; ?>').selected = 'selected';
  document.getElementById('<?php echo "district$district_id"; ?>').selected = 'selected';
  document.getElementById('<?php echo "city$city_id"; ?>').selected = 'selected';
</script>

Countries States and Cities Drop Down

Problem: Not able to get drop down values for cities, countries and states are successfully getting populated though.

3 Answers3