CODEWITHSUNDEEP
phpjquerymysql
PFlorentino
PFlorentino

Reputation: 31

Change dropdown2 query based on dropdown1 selection using php

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>

Upvotes: 0

Views: 84

Answers (1)

user6241578
user6241578

Reputation:

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.

Upvotes: 0

Related Questions