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

237
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

527
7
26

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

Countries States and Cities Drop Down

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

2 Answers2