Saturday 6 May 2017

Bootstrap Multi Select Dropdown with Checkboxes using Jquery in PHP



In this post we are going to discuss how to create multiple select dropdown listbox with checkbox select option by using Bootstrap Multiselect plugin. In one of the previous post we have already made discussion on multiple select dropdown list by using Bootstrap plugin, but in that plugin there is no functionality of checkbox option select. If you have use this plugin for make multiple select dropdown list then for select multiple option there is checkbox, so by check checkbox we can select multiple option from dropdown list box.

In this post we will discuss how to use this Bootstrap Multiselect plugin for make multiple select option with checkbox in dropdown list box. So we will make simple application in PHP for inserting the value of this multiple selected option so we can understand how to use this type of multiple select option with PHP for make real type of web application.

For called this plugin we have use multiselect() method, by using this method we can called this plugin in jquery. In this method there is many option are available to make multi select checkbox option dropdown as per our requirement. For example suppose you want to enable search filter into your dropbox then you have to add enableFiltering option into your method with true. So this plugin will search textbox into your dropdown listbox. So you can easily search your option by writing query into textbox.

If you have developed any web application and in which you want to required user can select multiple option from dropdown, so if you have use simple select box with multiple attribute, then user can select multiple option, but your form user interface will not be attractive and user will face problem to select multiple option. But suppose you have use this plugin then user can easily understand regarding he can select multiple option from list of option. Here we will seen simple example with this type of multi select dropdown list box. We will insert value of multi select dropdown by using Ajax JQuery with PHP.





Source Code


index.php



<!DOCTYPE html>
<html>
 <head>
  <title>Webslesson Tutorial | Bootstrap Multi Select Dropdown with Checkboxes using Jquery in PHP</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />
 </head>
 <body>
  <br /><br />
  <div class="container" style="width:600px;">
   <h2 align="center">Bootstrap Multi Select Dropdown with Checkboxes using Jquery in PHP</h2>
   <br /><br />
   <form method="post" id="framework_form">
    <div class="form-group">
     <label>Select which Framework you have knowledge</label>
     <select id="framework" name="framework[]" multiple class="form-control" >
      <option value="Codeigniter">Codeigniter</option>
      <option value="CakePHP">CakePHP</option>
      <option value="Laravel">Laravel</option>
      <option value="YII">YII</option>
      <option value="Zend">Zend</option>
      <option value="Symfony">Symfony</option>
      <option value="Phalcon">Phalcon</option>
      <option value="Slim">Slim</option>
     </select>
    </div>
    <div class="form-group">
     <input type="submit" class="btn btn-info" name="submit" value="Submit" />
    </div>
   </form>
   <br />
  </div>
 </body>
</html>

<script>
$(document).ready(function(){
 $('#framework').multiselect({
  nonSelectedText: 'Select Framework',
  enableFiltering: true,
  enableCaseInsensitiveFiltering: true,
  buttonWidth:'400px'
 });
 
 $('#framework_form').on('submit', function(event){
  event.preventDefault();
  var form_data = $(this).serialize();
  $.ajax({
   url:"insert.php",
   method:"POST",
   data:form_data,
   success:function(data)
   {
    $('#framework option:selected').each(function(){
     $(this).prop('selected', false);
    });
    $('#framework').multiselect('refresh');
    alert(data);
   }
  });
 });
 
 
});
</script>


insert.php



<?php 
//insert.php
$connect = mysqli_connect("localhost", "root", "", "testing");
if(isset($_POST["framework"]))
{
 $framework = '';
 foreach($_POST["framework"] as $row)
 {
  $framework .= $row . ', ';
 }
 $framework = substr($framework, 0, -2);
 $query = "INSERT INTO like_table(framework) VALUES('".$framework."')";
 if(mysqli_query($connect, $query))
 {
  echo 'Data Inserted';
 }
}
?>

33 comments:

  1. Thank you for tutorial,

    Well, how do I load the data from the database to the selection menu

    Thank you

    ReplyDelete
  2. Hello,
    How to update?
    Thank you

    ReplyDelete
  3. Thanks for sharing nice video

    ReplyDelete
  4. Very nice i llove it all you post thank you sir

    ReplyDelete
  5. I really like this lesson but i hope so you could also teach us how to select multiple data in another table using ID. That would really help me a lot as a student. I would really appreciate any response. Thank you

    ReplyDelete
  6. how we can make it dynamic dropdown list

    ReplyDelete
  7. i did not select any dropbox but pop up message data inserted still popped out

    ReplyDelete
  8. how to use this for only one

    i used this but that doesnt worked out.,


    $sql_query1 = "INSERT INTO movies_info (`movie_name`,`movie_image`,`movie_description`,`movie_trailer`,`release_date`,
    `release_year`,`movie_genre`,`movie_rating`,`movie_country`,`is_featured`)
    VALUES('$movie_name','$target','$movie_description','$movie_trailer','$release_date',
    '$release_year','".$movie_genre."','$movie_rating','$movie_country','$is_featured')";

    ReplyDelete
  9. Excellent guide!
    but if I also wanted to read from the database and change the information?

    Can you help me?

    ReplyDelete
  10. will this work for angular 2 ?

    ReplyDelete
  11. it helps me alot thanks for helping others

    ReplyDelete
  12. Awesome..Great work Thank you and awaiting for further developement exercises..have a nice day..

    ReplyDelete
  13. will you please provide the sql file...

    ReplyDelete
  14. Thank you! and awaiting for further developement exercises.

    ReplyDelete
  15. Hai, I have tried the code in my project doing as a codeignitor one. I have placed the links for js and css in a file called header.php, The dropdown list is coded in another page. When run the web page, the nonSelectedText and checkboxes aren't displayed. I Just copied the entire code in an html page it runs perfectly. Why php code doesn't displays the dropdown correctly. Give a solution. Whether the problem is because of links is written in the another page

    ReplyDelete
  16. how to upload 2 selected options ? the sample is
    1. option select name teacher
    2. option select name student

    2 options that excute in one insert.php and 1 row of database ?
    can u help ?

    ReplyDelete
  17. Thank you so much...
    Really appreciated that you shared the source code...

    ReplyDelete
  18. it works! thank you. but how to make if there is multiple question?

    ReplyDelete
  19. Hi... How to refill the select with previously selected records but from the database

    ReplyDelete
  20. First of all thanks for such excellent stuff, Will you please explain me how to show selected options?

    ReplyDelete
  21. Thanks for this excellent stuff, will you please explain me how to show selected options?

    ReplyDelete
  22. thanks you for your help..god bless you

    ReplyDelete
  23. i want to use this code but i want to change it so that the drop down menu fetches data from a table in my database and displays it on my dropdown menu and once i select it i can insert the selection into ANOTHER table

    con you please help me with that??

    ReplyDelete
  24. Not Working Show undefined multiselect

    ReplyDelete