Populate Dependent Dropdown using Jquery AJAX PHP

Populate Dependent Dropdown using Jquery AJAX PHP mytechlearns
PHPLeave a Comment on Populate Dependent Dropdown using Jquery AJAX PHP

Populate Dependent Dropdown using Jquery AJAX PHP

Populate Dependent Dropdown using Jquery AJAX PHP

Every software need Dropdown in many place like gender, department, religion and so many place. In PHP we can easily populate dependent dropdown with the help of Jquery and AJAX which easily collect those information from the user only select. Let’s discuss index.php page for dependent select option Dropdown validation using PHP:

<?php
session_start();
$con = mysqli_connect("localhost","root","","mudi");
?>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Dropdown Select from Database PHP</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body class="nav-md">
    <div class="container body">
        <div class="main_container">

            <!-- page content -->
            <div class="right_col" role="main" style="margin-bottom: 10px;">

                <!-- main content again -->
                <div class="clearfix"></div>
                <div class="row">
                  <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel">
                      <div class="x_title">
                        <h2>Dropdown Select from Database PHP MYSQL</h2>
                      </div>
                      <div class="x_content">
                        <form id="define-standard-form" action="" method="" data-parsley-validate class="form-horizontal form-label-left">
                          <div class="col-md-12 col-sm-12 col-xs-12 form-group">
                            <label class="control-label col-md-2 col-sm-3 col-xs-12">Division In Bangladesh <span class="required">*</span>
                            </label>
                            <div class="col-md-4 col-sm-6 col-xs-12">
                              <select id="division_id" name="division_id" class="form-control col-md-12 col-xs-12" onchange="">
                                <option value="" selected="selected">Select Division</option>
                                <?php
                                  $pp_sql = "SELECT DISTINCT id, name FROM bd_division ORDER BY id";
                                  $pp_res = mysqli_query($con, $pp_sql) or die(mysqli_error($con));
                                  while ($pp_row = mysqli_fetch_assoc($pp_res))
                                  {
                                      echo "<option value='".$pp_row['id']."'>";
                                      echo $pp_row['name'];
                                      echo "</option>";
                                  }
                                ?>
                              </select>
                            </div>
                          </div>


                          <!-- <div class="ln_solid"></div> -->
                          <div class="form-group" style="padding-left: 7px; margin-top: 30px;">
                            <div class="col-md-12 col-sm-12 col-xs-12 col-md-offset-2">
                              <button type="button" id="retrieve_data" class="btn btn-success">Submit</button>
                            </div>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- main content finished -->

            </div>
            <!-- /page content -->

        </div>
    </div>


    <script type="text/javascript">

      $(document).ready(function()
      {

          $('#retrieve_data').click(function()
          {
              var division_id = document.getElementById("division_id").value;

              $.ajax(
              {
                type: "POST",
                url: "saving.php",
                data: {division_id: division_id},
                error: function(jqXHR, textStatus, errorMessage)
                {
                    alert(errorMessage);
                },
                success: function(data)
                {
                    alert("You selected: "+data);
                }
              });

          });
      });

  </script>

</body>
</html>

In here, all the division data comes from database by division_id and when we select one of them and submit this using submit button then passing data to saving.php page using PHP POST Method. So have a look into the saving.php page:

<?php
	session_start();
	$con = mysqli_connect("localhost","root","","mudi");

	$division_id = $_POST['division_id'];

	//division search
	$division_sql = "SELECT * FROM bd_division WHERE id = '$division_id' ";
	$division_res = mysqli_query($con, $division_sql) or die(mysqli_error($con));
	$division_row = mysqli_fetch_assoc($division_res); 
	echo $division_row['name'];
?>

In the saving.php page get division_id and select the division name using sql query and show this result in index.php page.

That’s all for today. Thanks for reading…

Source Code: Click Here

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top