How to pass value into another page php using ajax

Question

I am trying to pass a value of a select option input using Ajax into another page PHP and get the database and fetch data into select option. However, my problem is there is nothing to show in second select option.

I have the select option called Country which contains Country 1, Country 2, Country 3, Country 4 with cid 1,2,3,4.

what I wanted is past Country ID (cid) into getdata.php and query the database of City which contains City a, city b, city c, etc. and fetch city's data into select option using Ajax.

I need to make city select option dynamically change when I select the country.

here is my database structure :

Country.db

City.db

Here is my script :

dropdown.php

<?php

    require_once "connection.php";
?>

<html>
<head>
    <title>Dropdown ajax</title>
</head>
<body>


<div class="country" >
    <label>Country</label>
    <select name="country" onchange="getId(this.value);">
    <option value=""> -- Select Country -- </option>

    <!-- populate value using php -->

    <?php
        $query = "SELECT * FROM country";
        $result = mysqli_query($con,$query);

        //loop

        foreach ($result as $country) {
        ?>
            <option value="<?php echo $country["cid"]; ?>"> <?php echo $country["country"]; ?> </option>

        <?php 
            } 
        ?>

</select>
</div>
<div class="city">
    <label>City</label>
    <select name="city" id="cityList">

        <option value=""></option>

    </select>
</div>
<script src="jquery-3.2.1.min"></script>
<script type="text/javascript">
    function getId(val){
        // ajax function

        $.ajax({
            type:"POST",
            url:"getdata.php",
            data:"cid="+val,
            success:function(data){
                $(#cityList).html(data);
            }
        });
    }
</script>

</body>
</html>

from the dropdown, I am trying to past cid into getdata.php using ajax and fetch the database into select option inside drop-down.php

getdata.php

<?php

require_once "connection.php";

if(!empty($_POST["cid"])){
    $cid = $_POST["cid"];
    $query = "SELECT * FROM city WHERE cid = $cid";
    $result = mysqli_query($con,$query);

    foreach ($result as $city) {

    ?>
    <option value="<?php echo $city["cityId"];?>"><?php echo $city["city"];?></option>

    <?php       
    }
}

?>

here is my connection.php

<?php
    $con = mysqli_connect("localhost","root","admin","dropdowndb");

    //check connection
    if(mysqli_connect_errno()){
        echo "Failed to connect :".mysqli_connect_errno();
    }
?>

the result is like this :

so how to fix this problem?

please use Chrome Developer Tools to debug this web application. To access the DevTools, open a web page or web app in Google Chrome. Select the Chrome menu Chrome Menu at the top-right of your browser window, then select Tools > Developer Tools. or just press F12. then click Console tab to see the error messages, click Network tab to debug the ajax call. then show the error messages to us so we can help you :D — aldo
What @aldo said is good advice, but you also need to be aware of your SQL injection vulnerability. You should not be taking post data and using it directly in queries without some validation, escaping, typecasting, or something. — Brian Gottier
@aldo : the error said Uncaught ReferenceError: $ is not defined at getId (dropdown.php:40) at HTMLSelectElement.onchange (dropdown.php:11) getId @ dropdown.php:40 onchange @ dropdown.php:11 — Tri Murvianto
finally solve the problem, the dropdown change dinamically using ajax. thanks for help. — Tri Murvianto

Stiliyan Stiliyan · Accepted Answer · 2017-09-09T01:34:50

The selector inside the ajax success handler must be a string, not identifier:

success:function(data){
  $('#cityList').html(data);
}

How to pass value into another page php using ajax

1 Answers