Wednesday, 19 December 2018

How to Create Editable Select Box using jQuery in PHP

           , , , , , , , , , ,      5 comments   


Hi, Guys in this post you can learn how to convert simple select box or combo box into editable select box by using jQuery with PHP script. By using editable dropdown list box user can easily filter list of option from large number of option, and he can select required option which he want to select at the time of form filling. This is required because if in select box there are large number of option then at the time of form filling by user, it will difficult for user for find right option from list of option. If select box is editable then user can type something under dropdown list box, and he can filter option according what he has type. By filtering options user can get proper option which he has find from list of option.

For make editable dropdown list box here we have use jQuery Editable Select plugin which you can find here from this Github link. From this link you can download this jQuery Editable Select plugin, and here you can also find complete documentation of this plugin also. Here in this post we will discuss how to make dynamic editable dropdown listbox by using this jQuery plugin with PHP. In short how to use jQuery Editable Select plugin with PHP script. Editable select box will add one feature in you web application, because it has reduce the work of user for finding option, and it is also increase the appearance of your website UI also. It will increase the functionality of your web based application.

Now question is arise how can convert simple dropdown list box to Editable dropdown list box by using this plugin. It is very simple, you have to just include library of this plugin in your web page, and after this in you have to called editableSelect() method on Select box attribute like class or id. Once this method has been called then it will initialize this plugin and it will convert select box to editable select box. In this post we have step by step describute how to make editable select box by using jQuery plugin, And how to use this editable select box in actual form based application using PHP. Below you can find PHP Mysql Crud operation application in which we have used editable dropdown list box, and how to use this feature with real web based application.


Read Also








Source Code


database_connection.php



<?php

//database_connection.php

$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");

?>

index.php



<?php

//index.php

include('database_connection.php');

$query = "SELECT * FROM apps_countries ORDER BY country_name ASC";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();


?>

<html>  
    <head>  
        <title>How to Make Editable Select Box using jQuery with PHP</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <link rel="stylesheet" href="jquery-editable-select.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="jquery-editable-select.min.js"></script>
  
    </head>  
    <body>  
        <div class="container">  
            <br />  
            <br />
   <br />
   <h2 align="center">How to Make Editable Select Box using jQuery with PHP</h2><br />
   <div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-6">
     <form method="post" id="sample_form">
      <div class="form-group">
       <label>Enter Name</label>
       <input type="text" name="name" id="name" class="form-control">
      </div>
      <div class="form-group">
       <label>Select Country</label>
       <select name="country" id="country" class="form-control">
       <?php
       foreach($result as $row)
       {
        echo '<option value="'.$row["country_name"].'">'.$row["country_name"].'</option>';
       }
       ?>
       </select>
      </div>
      <div class="form-group">
       <input type="hidden" name="action" id="action" value="add" />
       <input type="hidden" name="hidden_id" id="hidden_id" value="" /> 
       <input type="submit" name="Save" id="save" class="btn btn-success" value="Save" />
      </div>
     </form>
     <br />
     <div class="table-responsive">
      <table class="table table-bordered">
       <thead>
        <tr>
         <th>Name</th>
         <th>Country</th>
         <th>Edit</th>
        </tr>
       </thead>
       <tbody>
        
       </tbody>
      </table>
     </div>
    </div>
    
   </div>
   
   
   <br />
   <br />
   <br />
  </div>
    </body>  
</html>  
<script>  
$(document).ready(function(){
 
 fetch_data();
 
 function fetch_data()
 {
  $.ajax({
   url:"fetch.php",
   method:"POST",
   success:function(data)
   {
    $('tbody').html(data);
   }
  });
 }
 
 $('#country').editableSelect();
 
 $('#sample_form').on('submit', function(event){
  event.preventDefault();
  
  if($('#name').val() == '')
  {
   alert("Enter Name");
   return false;
  }
  else if($('#country').val() == '')
  {
   alert("Select Country");
   return false;
  }
  else
  {
   $.ajax({
    url:"action.php",
    method:"POST",
    data:$(this).serialize(),
    success:function(data)
    {
     alert(data);
     $('#sample_form')[0].reset();
     $('#action').val("add");
     $('#save').val('Save');
     fetch_data();
    }
   });
  }
 });
 
 $(document).on('click', '.edit', function(){
  var id = $(this).attr("id");
  var action = 'fetch_single';
  $.ajax({
   url:"action.php",
   method:"POST",
   data:{id:id, action:action},
   dataType:'json',
   success:function(data)
   {
    $('#hidden_id').val(id);
    $('#name').val(data.name);
    $('#country').val(data.country);
    $('#action').val("edit");
    $('#save').val('Edit');
   }
  });
 });

});  
</script>



fetch.php



<?php

//fetch.php

include('database_connection.php');

$query = "SELECT * FROM sample_data ORDER BY id DESC";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$total_row = $statement->rowCount();
$output = '';
if($total_row > 0)
{
 foreach($result as $row)
 {
  $output .= '
  <tr>
   <td>'.$row["name"].'</td>
   <td>'.$row["country"].'</td>
   <td><button type="button" name="edit" class="btn btn-primary btn-xs edit" id="'.$row["id"].'">Edit</button></td>
  </tr>
  ';
 }
}
else
{
 $output .= '
 <tr>
  <td colspan="3" align="center">Data not found</td>
 </tr>
 ';
}

echo $output;

?>

action.php



<?php

//action.php

include('database_connection.php');

if(isset($_POST["action"]))
{ 
 
 if($_POST["action"] == "add")
 {
  $data = array(
   ':name'  => $_POST["name"],
   ':country'  => $_POST["country"]
  );
  
  $query = "
  INSERT INTO sample_data (name, country) 
  VALUES (:name, :country)
  ";
  
  $statement = $connect->prepare($query);
  if($statement->execute($data))
  {
   echo 'Data Inserted';
  }
 }
 
 if($_POST["action"] == 'fetch_single')
 {
  $query = "SELECT * FROM sample_data WHERE id='".$_POST["id"]."'";
  $statement = $connect->prepare($query);
  $statement->execute();
  $result = $statement->fetchAll();
  foreach($result as $row)
  {
   $output['name'] = $row["name"];
   $output['country'] = $row["country"];
  }
  echo json_encode($output);
 }
 
 if($_POST["action"] == "edit")
 {
  $data = array(
   ':name'  => $_POST["name"],
   ':country'  => $_POST["country"],
   ':id'  => $_POST["hidden_id"]
  );
  $query = "
  UPDATE sample_data 
  SET name = :name, country = :country 
  WHERE id = :id
  ";
  $statement = $connect->prepare($query);
  if($statement->execute($data))
  {
   echo 'Data Updated';
  }
 }
 
}

?>




5 comments: