Dynamic Dropdown List PHP AJAX

Question

With instructions I found online, I created a very basic dynamic dropdown list (cascading dropdown) that looks at database values, and where the 2nd field (city) is populated based on what is selected in the first field (country). Below is my code I am using. I can get the first dropdown to populate with database data, however when I make a selection in the country field, nothing populates in the city field. I'm thinking it ay have something to do with where I have my jquery (.js) file saved to. I have it saved in my index folder (localhost/cascadingdropdown/) but in the CascadingDropDown script it's referenced as src="//code.jquery.com/jquery-1.12.0.js">. Thanks in advance!

CascadingDropDown PHP script:

<?php

include('connect2-mysql.php');

?>

<!DOCTYPE HTML>
<html>
<head>
  <title>Cascading Dropdown</title>
<style>
.error {color: #FF0000;}
type="text/css">
   .country, .city{
       margin: 20px
   text-align: center;}
</style>
</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";
       $results = mysqli_query($dbcon, $query);
       //loop
       foreach ($results as $country) {

       ?>
       <option value="<?php echo $country["id"]; ?>"><?php echo $country["countryname"]; ?></option>
       <?php 
       }


       ?>
    </select>
</div>
<br></br>
<div class="city">
<label>City</label>
  <select name="city" id="cityList">
       <option value=""></option>

    </select>
</div>
<script> src="//code.jquery.com/jquery-1.12.0.js"></script>
<script>
   function getId(val){
        //we create ajax function
        $.ajax({
             type: "POST",
             url: "getdata.php",
             data: "id="+val,
             success: function(data){
                 $("#cityList").html(data);
             }

        });
   }

</script>
</body>

Getdata.php script:

<?php

include('connect2-mysql.php');

if(!empty($_POST["id"})) {
    $query = "SELECT * FROM city WHERE cid = $cid";
    $results = mysqli_query($dbcon, $query);
    foreach ($results as $city) {
    ?>
   <option value="<?php echo $city["cityid"] ?>"><?php echo $city["cityname"]; ?></option>
   <?php


    }

}

?>

ThoriumBR · Accepted Answer · 2017-09-06 21:01:16Z

1

You are testing for $_POST['id'] but not attributing it to anything.

Alter your code a little:

if(!empty($_POST["id"})) {
    $cid = $_POST['id'];
    $query = "SELECT * FROM city WHERE cid = $cid";
    $results = mysqli_query($dbcon, $query);

answered Sep 6, 2017 at 21:01

ThoriumBR

94012 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Kevin Over a year ago

@ThioriumBR I made the change as sugguested, however the 2nd dropdown is still not being populated from the first selection...

ThoriumBR Over a year ago

You can use Element Inspector on Firefox or Chrome to see the network traffic and see if your code is returning valid HTML. It will show you any errors on the console too.

Kevin Over a year ago

@ThioriumBR I added image (see above) of error in Chrome element inspector console. Do you know what they refer to?

Kevin Over a year ago

The errors in the element inspector are referring to these two lines of code: Line 37: <script> src="//code.jquery.com/jquery-1.12.0.js"></script> Line 41: $.ajax({

ThoriumBR Over a year ago

Your <script> tag is wrong. You are closing the tag before adding the src parameter.

|

Collectives™ on Stack Overflow

Dynamic Dropdown List PHP AJAX

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related