CODEWITHSUNDEEP
phpjquerymysql
TSCAmerica.com
TSCAmerica.com

Reputation: 5377

AJAX DropDown not populating

I am using Jquery and PHP. So that on selection of first dropdown the value of first drop down should be passed to a Mysql query and then populate the second dropdown, but the second drop down displays blank.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $("#city").change(function() {
            var value = $(this).val();
            $.ajax({
                type : "GET",
                url : 'abc.php',
                data : {
                    choice : value
                },
                success : function(data){
                    $('#123').html(data); 
                }
            })
        });
    });
</script>

<form action="" method="post">
    <select class="form-control" id="city" action="" name="city" value="">
        <option value="">--</option>
        <option value="1"</option>
        <option value="2"</option>
        <option value="3"</option>
    </select>
    <br/>
</div>
<div class="form-group">        
    <select class="form-control" action="" name="123" id="123"">
        <option value="--">--</option>
        <?php
        $query = "SELECT DISTINCT `Comm` FROM `Comm_New` WHERE `Market`='".$_GET['city']."'  ORDER BY `Comm` ASC";
        if ($result = mysqli_query($link, $query)) {
            while ($Comm = mysqli_fetch_assoc($result)) {
                print_r("<option value='".$Comm['Comm']."'>".$Comm['Comm']."</option>");
            }
        }           
        ?>
    </select><br/>
</div>

Upvotes: 0

Views: 84

Answers (1)

Rasclatt
Rasclatt

Reputation: 12505

From our conversation in the comments you are calling the same page that you are originally loading. That is not necessarily a problem technically, it's just not implemented properly. To load the same page, you need to do:

<?php
// Make sure your database is initiated above here so this can use it.
// I am going to demonstrate a basic binding using a super basic PDO
// connection because procedural mysqli_* with bind is just annoying
$link = new PDO('mysql:host=localhost;dbname=test', $user, $pass);
// Notice that you send "choice" as the GET key in your ajax, not "city"
if(!empty($_GET['choice'])) {
?>
    <select class="form-control" action="" name="123" id="123"">
        <option value="">--</option>
        <?php
        // prepare, bind, execute here
        $query = $link->prepare("SELECT DISTINCT `Comm` FROM `Comm_New` WHERE `Market` = :0  ORDER BY `Comm` ASC");
        $query->execute(array(':0'=>$_GET['choice']));
        // PDO has a lot of connection settings where you can set the default
        // return type so you don't need to tell it to fetch assoc here.
        // Also, you would tell the the connection not to just emulate bind
        // etc.. I would consider using PDO or the OOP version of mysqli 
        while ($Comm = $query->fetch(PDO::FETCH_ASSOC)) {
            echo "<option value='".$Comm['Comm']."'>".$Comm['Comm']."</option>";
        }

?>    </select>
<?php
        // Stop the page from running further
        die();
    }
?><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $("#city").change(function() {
            var value = $(this).val();
            $.ajax({
                type : "GET",
                url : 'abc.php',
                data : {
                    choice : value
                },
                success : function(data){
                    // Populate the empty container #new_drop
                    $('#new_drop').html(data); 
                }
            })
        });
    });
</script>

<form action="" method="post">
    <select class="form-control" id="city" action="" name="city" value="">
        <!--
             Your options are malformed. Missing close ">"
             probably just copy error
        -->
        <option value="">--</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select><br/>
    </div>
    <!-- Add id="new_drop" to this div -->
    <div class="form-group" id="new_drop">
    </div>

Ideally you want to have the top part on a new page, and possibly return a set of data as opposed to straight html, but ajax is very flexible.

Upvotes: 1

Related Questions