How to make A Loading bar with dependent dropdown

We can make a dependent drop downing with a loading bar. It is very easy to make a dependent drop down with jQuery. We have used the AJAX Technique of JQUERY which helps us to load the data without refreshing the page. As we know that jQuery is a library of JavaScript.

Download the code from Downloading bar

So We have two files one for fetching the records from the database and another is index.php file. So first we will make INDEX.php

//Code starts 
<?php  
 $conn = mysqli_connect('localhost','root','','test');
?>
<!DOCTYPE html>
<html lang="en">
<head>
@@ -8,27 +14,67 @@
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
 <h3 class="mt-4 text-center text-secondary">Loading Bar in Jquery PHP</h3>
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    <div class="col-sm-3">
      <h5 class="mt-4">Select State list</h5>
       <select name="" id="stateName" class="form-control mt-3">
        <?php 
              $sql = "SELECT * FROM loading_bar";
              $query = mysqli_query($conn,$sql);
              while($row=mysqli_fetch_assoc($query))
              {
                echo '<option value="'.$row['id'].'">'.$row["state_name"].'</option>';
              }
        ?>
       </select>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    <div class="col-sm-4 offset-sm-1">
      <h5 class="mt-4 ">State Details</h5>
        <p id="loading" style="display:none">
           <i class="fa fa-spinner fa-spin fa-3x fa-fw text-secondary"></i><span class="sr-only">Loading...</span>
        </p>
        <div class="p-2 text-secondary" id="stateDetail" style="display:none;border: 1px solid #000000;"  >
        </div>
    </div>
  </div>
</div>
</body>
</html>
<script>
  $(document).ready(function(){
    $('#stateName').change(function(){
      var state = $('#stateName').val();
       $.ajax({
          url:'fetch.php',
          type:'post',
          data:{stateID:state},
          dataType:'json',
          success:function(response)
          {
             $('#loading').css('display','block');
             $.each(response, function(key,value) 
               {
                $('#stateDetail').css('display','none'); 
                setTimeout(function()
                  { 
                    $('#stateDetail').css('display','block').text(value.state_detail);
                    $('#loading').css('display','none');
               },3000);
             });
          }
       });
    });
  });
</script>
// Code Ends here 

Now we will make fetch.php for fetching the records from the database ( Ajax call will fetch record from this file and pass the data to index.php )

// Code starts here 
<?php
 $conn = mysqli_connect('localhost','root','','test');
 $stateID = $_POST['stateID'];
 $sql = "SELECT * FROM loading_bar WHERE id=$stateID";
 $query = mysqli_query($conn,$sql);
 $output = array();
    
   
    while($row=mysqli_fetch_assoc($query))
    {
        $output[] = $row;
    }
    echo json_encode($output);
    
?>
// Code ends here 

Comments 1

Leave a Reply

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