Ajax Depented Dropdown

 

Ajax Depented Dropdown (PHP)


index.php


<?php 

   $conn = mysqli_connect("localhost","root","","dropdown_list");

   

   if ($_SERVER['REQUEST_METHOD'] == "POST") {

       $country_dropdown = $_REQUEST['country_dropdown'];

       $state_dropdown = $_REQUEST['state_dropdown'];

       $dist_dropdown = $_REQUEST['dist_dropdown'];

       $enter_population = $_REQUEST['enter_population'];

       $btn = $_REQUEST['btn'];

   

       $query = mysqli_query($conn, "INSERT INTO population_table (country_dropdown,state_dropdown,city_dropdown,total_population) VALUES ('$country_dropdown','$state_dropdown','$dist_dropdown','$enter_population')");

           if ($conn->affected_rows > 0) {

               echo "<script>alert('Submited successfully')</script>";

           }else{

               echo "Sorry data not insert";

           }

   }

   ?>

<!DOCTYPE html>

<html lang="en">

   <head>

      <meta charset="UTF-8">

      <meta http-equiv="X-UA-Compatible" content="IE=edge">

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <title>Document</title>

   </head>

   <body>

      <h1 style="text-align:center;">Ajax Dependent Dropdown </h1>

      <form method="POST">

         <table border="1" cellspacing="0" align="center">

            <tr>

               <th>Select Country</th>

               <td >

                  <select name="country_dropdown" id="country_dropdown">

                     <option hidden="hidden">Choose</option>

                     <?php 

                        $query = mysqli_query($conn, "SELECT * FROM country_dropdown");

                        while ($fetch = mysqli_fetch_array($query)) {

                        ?>

                     <option value="<?php echo $fetch['country_id']?>"><?php echo $fetch['country_name']?></option>

                     <?php

                        }

                        ?>

                  </select>

               </td>

            </tr>

            <tr>

               <th>Select State</th>

               <td>

                  <select name="state_dropdown" id="state_dropdown">

                  </select>

               </td>

            </tr>

            <tr>

               <th>Select Dist</th>

               <td>

                  <select name="dist_dropdown" id="dist_dropdown">

                  </select>

               </td>

            </tr>

            <tr>

               <th>Enter Population: </th>

               <td>

                  <input type="text" name="enter_population" id="enter_population">

               </td>

            </tr>

            <tr colspan=2>

               <td colspan=2 align=center>

                  <input type="submit" name="btn" value="Submit">

               </td>

            </tr>

         </table>

      </form>

   </body>

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

   <script>

      $(document).ready(function () {

          

          //country droup ajax:

         $("#country_dropdown").change(function(){

             var country_dropdown=this.value; 

          //    alert(country_dropdown);

      

             $.ajax({

                 data : {country_dropdown : country_dropdown},

                 type : "POST",

                 url : "state.php",

              //    processData : false,

              //    contentType : false,

                 success: function (res) {

                     $('#state_dropdown').html(res);

                     //alert("njj");

                 }

             });

         }) 

      

         //state droup ajax:

         $('#state_dropdown').change(function () {

             var state_dropdown = this.value;

          //    alert(state_dropdown);

             $.ajax({

                 data : {state_dropdown: state_dropdown},

                 type : "POST",

                 url : "city.php",

              //    processData : false,

              //    contentType : false,

                 success: function (res) {

                     $('#dist_dropdown').html(res);

                  //    alert("njj");

                 }

             });

         })


      });

   </script>

</html>


state.php


<?php 

   $conn = mysqli_connect("localhost","root","","dropdown_list");

   

   $country_id = $_REQUEST['country_dropdown'];

   

   $query = mysqli_query($conn, "SELECT * FROM state_dropdown WHERE country_id = $country_id");

?>

<option hidden="hidden">Choose</option>

<?php 

   while ($fetch = mysqli_fetch_array($query) ) {

?>

<option value="<?php echo $fetch['state_id']?>"><?php echo $fetch['state_name']?></option>

<?php 

   }

?>


city.php


<?php 

   $conn = mysqli_connect("localhost","root","","dropdown_list");

   

   $state_id = $_REQUEST['state_dropdown'];

   

   $query = mysqli_query($conn, "SELECT * FROM city_dropdown WHERE state_id = $state_id");

?>

<option hidden="hidden">Choose</option>

<?php 

   while ($fetch = mysqli_fetch_array($query)) {    

?>

<option value="<?php echo $fetch['city_id']?>"><?php echo $fetch['city_name']?></option>

<?php 

   }

?>

Comments

Post a Comment

Popular posts from this blog

C.R.U.D Oparetion in (PHP Code)

C.R.U.D Oparetion   index.php <?php include "conn.php"; if (isset($_POST["usersubmit"]))  {     $vrname = $_POST["username"];     $vremployee = $_POST["useremployee"];     $vrsalary = $_POST["usersalary"];     $vrgender = $_POST["gender"];     //testing sucessfully complete     // echo $vrname;     // echo $vremployee;     // echo $vrsalary;     // echo $vrgender;     // exit();     $inserting = "INSERT INTO dbemployeelist(dbname, dbemployee, dbsalary, dbgender) VALUES('$vrname', '$vremployee', '$vrsalary', '$vrgender')";     $connecting = mysqli_query($conn,$inserting); } ?> <!DOCTYPE html> <html lang="en"> <head>     <title>Document</title>     <style>         form{             text-align:center;             padding:2...
Read more

Search Dropdown - jQuery

Image
<select name="vehicle_no" id="vehicle_no" class="form-control select" >   <option value="" >Select Vehicle</option>      <?php //echo $vchVehicleNumber;exit;?>           @foreach($vehiclesData as $data)              <option {{(isset($vchVehicleNumber) && $vchVehicleNumber == $data['vehicleno'])?'selected':''}} value="{{ $data['vehicleno'] }}" >{{ $data['vehicleno'] }}</option>              @endforeach </select> // jQuery:- you have to add CDN of select2 jquery $("#vehicle_no").select2({   minimumResultsForSearch: Infinity }); $('#vehicle_no').select2({    minimumInputLength: 0  });
Read more

Ajax Crud Oparetion (Only Insert Code "create") | PHP | Jquery | Ajax | CODE

Image
 index.php(Frontend & ajax) <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title> </head> <body>     <form id="aj">     Name :<input type="text" name="u_name">     Mobile :<input type="text" name="u_mob">     <button type="button" onclick="user_submit();">SEND</button >     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>     <script>         function user_submit()          {             var send = new FormData(aj);             // console.log(send);   ...
Read more