Change dropdown2 query based on dropdown1 selection using php

Question

I have two dropdowns using Php that both pull dropdown contents from mysql database. I'm not a jquery type of guy but I know this needs one. So I want to change the dropdown2 query based on the dropdown1 selection. Here's my two dropdown code.I'm not using any framework. I'm not even using codeigniter since I dont know how to use that as of now.

DROPDOWN1

$sql = "SELECT distinct country_id, country_name FROM country";
$res = mysqli_query($conn,$sql);
echo "<option>-- Select Country --</option>";
   while ($row = mysqli_fetch_array($res))
   {
   echo "<option value=".$row['country_id'].">" . $row['country_name'] . "</option>";
   }

DROPDOWN2

$sql = "SELECT distinct state_id, state_name FROM state";
$res = mysqli_query($conn,$sql);
echo "<option>-- Select State --</option>";
while ($row = mysqli_fetch_array($res))
  {
   echo "<option value=".$row['state_id'].">" . $row['state_name'] . "</option>";
  }

I'm thinking of this line

$sql = "SELECT distinct state_id, state_name FROM state";

changed into

$sql = "SELECT distinct state_id, state_name FROM state where country=" dropdown1 selected something;

But I dont know where to start.

My index.php

<html>
<head>

    <!-- Theme style -->
    <link href="67828d6d/css/bootstrap.css" rel="stylesheet">
    <link href="ffa4e0f4/css/AdminLTE.css" rel="stylesheet">
    <link href="ffa4e0f4/css/font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="ffa4e0f4/css/ionicons-2.0.1/css/ionicons.min.css" rel="stylesheet">
    <link href="ffa4e0f4/css/bootstrap-multiselect.css" rel="stylesheet">
    <link href="ffa4e0f4/css/EdusecCustome.css" rel="stylesheet">
    <script src="efec5552/jquery.js"></script>
    <script src="c3380d9d/yii.js"></script>
    <script src="67828d6d/js/bootstrap.js"></script>
    <script src="ffa4e0f4/js/AdminLTE/app.js"></script>
    <script src="ffa4e0f4/js/plugins/slimScroll/jquery.slimscroll.min.js"></script>
    <script src="ffa4e0f4/js/bootstrap-multiselect.js"></script>
    <script src="ffa4e0f4/js/custom-delete-confirm.js"></script>
    <script src="ffa4e0f4/js/bootbox.js"></script>
    <script src="ffa4e0f4/js/bootstrap.file-input.js"></script>
    <script src="ffa4e0f4/js/bootstrapx-clickover.js"></script>
</head>
<body>
    <section class="content">
     <div class="col-xs-12">
        <div class="col-lg-12 col-sm-12 col-xs-12 no-padding edusecArLangCss"><h3 class="box-title"><i class="fa fa-plus"></i> Add City/Town</h3></div>
    </div>


 <div class="city-create">

<div class="col-xs-12 col-lg-12">
    <div class="box-success box view-item col-xs-12 col-lg-12">
        <div class="city-form">

            <form id="city-form" action="../functions/actions.php" method="post" role="form">
                <input type="hidden" name="_csrf" value="OUcxbHdqUDNOIFYkGwV9WU4kQCESPiR2DR5WXTk8Ih54KkhUGSAGXw==">
                <div class="col-xs-12 col-lg-12 no-padding">
                    <div class="col-sm-4">
                        <div class="form-group field-city-city_country_id required">

                            <select class="form-control" name="country" >
                                <?php 
                                    $sql = "SELECT distinct country_id, country_name FROM country";
                                    $res = mysqli_query($conn,$sql);
                                    echo "<option>-- Select Country --</option>";
                                    while ($row = mysqli_fetch_array($res)){
                                    echo "<option value=".$row['country_id'].">" . $row['country_name'] . "</option>";
                                    }
                                ?>
                            </select>
                            <p class="help-block help-block-error"></p>
                        </div>  
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group field-city-city_state_id required">

                            <select class="form-control" name="state">
                                <?php 
                                    $sql = "SELECT distinct state_id, state_name FROM state";
                                    $res = mysqli_query($conn,$sql);
                                    echo "<option>-- Select State --</option>";
                                    while ($row = mysqli_fetch_array($res)){
                                    echo "<option value=".$row['state_id'].">" . $row['state_name'] . "</option>";
                                    }
                                ?>
                            </select>

                            <p class="help-block help-block-error"></p>
                        </div>          
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group field-city-city_name required">

                            <input type="text" id="city-city_name" class="form-control" name="city-city_name" maxlength="35" placeholder="City/Town Name" required>

                            <p class="help-block help-block-error"></p>
                        </div>  
                    </div>
                </div>
                <div class="form-group col-xs-12 col-sm-6 col-lg-4 no-padding edusecArLangCss">
                    <div class="col-xs-6">
                        <button type="submit" class="btn btn-block btn-success" name="btnsavetown">Create</button>  
                    </div>
                    <div class="col-xs-6">
                        <button type="reset" class="btn btn-default btn-block">Reset</button>   
                    </div>
                </div>

            </form>    
        </div>
    </div>
</div>

Possible duplicate of Populating a select box using JQUERY, AJAX and PHP — Epodax
– Epodax, Commented Aug 18, 2016 at 8:37
Possible but not duplicate. I don't do code igniter. Thanks. — PFlorentino
– PFlorentino, Commented Aug 18, 2016 at 8:41

score 0 · Accepted Answer · 2016-08-18 09:53:04Z

0

modify you code like this.

<div class="col-sm-4">
    <div class="form-group field-city-city_country_id required">

        <select class="form-control" name="country" id="country">
            <?php 
                $sql = "SELECT distinct country_id, country_name FROM country";
                $res = mysqli_query($conn,$sql);
                echo "<option id='countryOpt'>-- Select Country --</option>";
                while ($row = mysqli_fetch_array($res)){
                echo "<option value=".$row['country_id'].">" . $row['country_name'] . "</option>";
                }
            ?>
        </select>

        <p class="help-block help-block-error"></p>
    </div>  
</div>
<div class="col-sm-4">
    <div class="form-group field-city-city_state_id required">

        <select class="form-control" name="state">
            <?php 
                $sql = "SELECT distinct state_id, state_name FROM state";
                $res = mysqli_query($conn,$sql);
                echo "div id='drop2'";
                echo "<option>-- Select State --</option>";
                while ($row = mysqli_fetch_array($res)){
                echo "<option value=".$row['state_id'].">" . $row['state_name'] . "</option>";
                }
                echo "</div>";
            ?>
        </select>

        <p class="help-block help-block-error"></p>
    </div>  
    <script type="text/javascript">
        $('#countryOpt').change(function(){
             var optValue = $('#countryOpt option:selected').val();
             $.post('dropdown2.php',{val:optValue,type:'POSTREQ'},function(e){
             $('#drop2').html(e);
            });
        });
    </script>        
</div>

now create a new php file called dropdown2.php and paste this code there

<?php 

if(isset($_POST['type'])&&$_POST['type']=='POSTREQ'&&isset($_POST['val'])){
$state=$_POST['val'];
$sql = "SELECT distinct state_id, state_name FROM $state";
$res = mysqli_query($conn,$sql);
echo "<option>-- Select State --</option>";
    while ($row = mysqli_fetch_array($res))
    {
    echo "<option value=".$row['state_id'].">" . $row['state_name'] . "</option>";
    }
}

?>

if the mysql query is not what you want change it to your requirements.

P.S you need to create new php file because the $.post function gets all echo-ed information from the file where you send the request.

edited Aug 18, 2016 at 9:53

answered Aug 18, 2016 at 9:01

user6241578

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

6 Comments

PFlorentino Over a year ago

Nope. Im just trying to do this on one form only. The html and php are in one form only. How Can i do that?

user6241578 Over a year ago

you mean that you only have DROPDOWN1 and then you delete it and show DROPDOWN2 based on option selected on DROPDOWN1?

PFlorentino Over a year ago

Nope. I have dropdown1 and 2 in the same form which is get_town_country.php. Dropdown1(country) pulls data from mysql as well as dropdown 2(town). But I want to filter dropdown 2(town) results based on dropdown 1(country) selected data.

user6241578 Over a year ago

check the updated answer. since you want both form on pageload you will have to set a default state and then when user selects an option from DROPDOWN1 the DROPDOWN2 gets updated

PFlorentino Over a year ago

Sorry, i think i didnt explain my side well. Dropdown1 and 2 is inside get_town_country.php. My get_town_country.php has html and php code inside. The 2 dropdown is inside this get_town_country.php. I'll update my main code to show you

|

Collectives™ on Stack Overflow

Change dropdown2 query based on dropdown1 selection using php

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related