Bootstrap Multiselect Dropdown With Checkbox Using Jquery In Php

February 11, 2022 XpertPhp

In this tutorial, we will explain to you how to create bootstrap multiselect dropdown with checkbox using jquery In Php. Sometimes we need to select multiple options in the dropdown list with checkbox to search items.

In this example, We use the bootstrap multiselect plugin for create multiple dropdown with checkbox using Bootstrap, jQuery and PHP.

Include Bootstrap and jQuery CDN Files

In this step, We need to include the bootstrap CDN and jquery CDN in our PHP file.

  <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" />

Create Multiselect Dropdown with Checkbox

Now, we will create the multi select dropdown using bootstrap. so you can see our full example code file.

  <div class="container">
   <h2 align="center">Multiselect Dropdown With Checkbox In Php</h2>
   <form method="post" id="cars_form" name="cars_form">
    <div class="col-md-3">
    </div>
	<div class="col-md-7">	
		<div class="form-group">
		 <label>Select Cars:</label><br/>
		 <?php
				$cars = array (
				  array("id"=>1,"name"=>"Volvo"),
				  array("id"=>2,"name"=>"BMW"),
				  array("id"=>3,"name"=>"Saab"),
				  array("id"=>4,"name"=>"Land Rover"),
				  array("id"=>5,"name"=>"Skoda"),
				  array("id"=>6,"name"=>"Rolls Royce"),
				  array("id"=>7,"name"=>"Audi")
				);
		 ?>
		 <select id="cars" name="cars[]" multiple class="form-control" >
		 <?php foreach($cars as $val){?>
			<option value="<?php echo $val['id'];?>"><?php echo $val['name'];?></option>
		 <?php } ?>
		 </select>
		</div>
		<div class="form-group">
		 <input type="submit" class="btn btn-info" name="submit" value="Submit" />
		</div>
	</div>
   </form>
  </div>

<h2 align="center">Multiselect Dropdown With Checkbox In Php</h2>

</div>

<label>Select Cars:</label><br/>

<?php

$cars = array (

array("id"=>1,"name"=>"Volvo"),

array("id"=>2,"name"=>"BMW"),

array("id"=>3,"name"=>"Saab"),

array("id"=>4,"name"=>"Land Rover"),

array("id"=>5,"name"=>"Skoda"),

array("id"=>6,"name"=>"Rolls Royce"),

array("id"=>7,"name"=>"Audi")

);

<?php foreach($cars as $val){?>

<?php } ?>

</select>

</div>

</div>

</form>

</div>

Implement Multiselect Dropdown Checkbox

Now we will implement multiselect dropdown checkbox using jquery. so you can see the below example.

 $('#cars').multiselect({
  nonSelectedText: 'Select Cars',
  enableFiltering: true,
  enableCaseInsensitiveFiltering: true,
  buttonWidth:'400px'
 });

$('#cars').multiselect({

nonSelectedText: 'Select Cars',

enableFiltering: true,

enableCaseInsensitiveFiltering: true,

buttonWidth:'400px'

});

index.php

<!DOCTYPE html>
<html>
 <head>
  <title>Multiselect Dropdown With Checkbox In Php - XpertPhp</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>
  <div class="container">
   <h2 align="center">Multiselect Dropdown With Checkbox In Php</h2>
   <form method="post" id="cars_form" name="cars_form">
    <div class="col-md-3">
    </div>
	<div class="col-md-7">	
		<div class="form-group">
		 <label>Select Cars:</label><br/>
		 <?php
				$cars = array (
				  array("id"=>1,"name"=>"Volvo"),
				  array("id"=>2,"name"=>"BMW"),
				  array("id"=>3,"name"=>"Saab"),
				  array("id"=>4,"name"=>"Land Rover"),
				  array("id"=>5,"name"=>"Skoda"),
				  array("id"=>6,"name"=>"Rolls Royce"),
				  array("id"=>7,"name"=>"Audi")
				);
		 ?>
		 <select id="cars" name="cars[]" multiple class="form-control" >
		 <?php foreach($cars as $val){?>
			<option value="<?php echo $val['id'];?>"><?php echo $val['name'];?></option>
		 <?php } ?>
		 </select>
		</div>
		<div class="form-group">
		 <input type="submit" class="btn btn-info" name="submit" value="Submit" />
		</div>
	</div>
   </form>
   <br />
  </div>
 </body>
</html>

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

<!DOCTYPE html>

<html>

<head>

<title>Multiselect Dropdown With Checkbox In Php - XpertPhp</title>

</head>

<body>

<h2 align="center">Multiselect Dropdown With Checkbox In Php</h2>

</div>

<label>Select Cars:</label><br/>

<?php

$cars = array (

array("id"=>1,"name"=>"Volvo"),

array("id"=>2,"name"=>"BMW"),

array("id"=>3,"name"=>"Saab"),

array("id"=>4,"name"=>"Land Rover"),

array("id"=>5,"name"=>"Skoda"),

array("id"=>6,"name"=>"Rolls Royce"),

array("id"=>7,"name"=>"Audi")

);

<?php foreach($cars as $val){?>

<?php } ?>

</select>

</div>

</div>

</form>

<br />

</div>

</body>

</html>

$(document).ready(function(){

$('#cars').multiselect({

nonSelectedText: 'Select Cars',

enableFiltering: true,

enableCaseInsensitiveFiltering: true,

buttonWidth:'400px'

});

$('#cars_form').on('submit', function(event){

event.preventDefault();

var form_data = $(this).serialize();

$.ajax({

url:"insert.php",

method:"POST",

data:form_data,

success:function(data)

{

$('#cars option:selected').each(function(){

$(this).prop('selected', false);

});

$('#cars').multiselect('refresh');

alert(data);

}

});

</script>

Get Selected Values on Form Submit

Now finally When the user submits the form then data will be inserted into the database.
insert.php

<?php 
$connect = mysqli_connect("localhost", "root", "", "testdb");

if(isset($_POST["cars"]))
{
 if(count($_POST["cars"])>1){
	$cars = implode(",",$_POST["cars"]);
 }else{
	 $cars = $_POST["cars"][0];
 }
 $query = "INSERT INTO cars(car_id) VALUES('".$cars."')";
 if(mysqli_query($connect, $query))
 {
  echo 'Data Inserted';
 }
}
else{
	echo "Please Choose any cars";
}
?>

<?php

$connect = mysqli_connect("localhost", "root", "", "testdb");

if(isset($_POST["cars"]))

{

if(count($_POST["cars"])>1){

$cars = implode(",",$_POST["cars"]);

}else{

$cars = $_POST["cars"][0];

}

$query = "INSERT INTO cars(car_id) VALUES('".$cars."')";

if(mysqli_query($connect, $query))

{

echo 'Data Inserted';

}

else{

echo "Please Choose any cars";

}

Download

Please follow and like us:

Include Bootstrap and jQuery CDN Files

Create Multiselect Dropdown with Checkbox

Implement Multiselect Dropdown Checkbox

Get Selected Values on Form Submit

Related posts: