In this post we have learn one more Jquery plugin for Bootstrap framework, here we are going to discuss Bootstrap Select plugin which is useful to make stylish select box with option of multiple selection. This plugin is easily integrate with Bootstrap library. There are many plugin like datepicker, colorpicker, select with search and many more available for Bootstrap, this all plugin we can easily integrate within Bootstrap framework.
Bootstrap Select plugin make stylish Select box with selection of multiple option at one time. By using this plugin you can also activate search feature under selection box also. So if your selection box has many option then at that time this search option will be useful to find option from select box.
In this post we have make discussion on how to use this Bootstrap Select plugin within form select tag and how to activate this plugin on select tag. For initialize this plugin we have to define .selectpicker class into select tag class attribute and then after in JQuery code we have write selectpickert() method with selector of .selectpicker class. By this method we can activate this plugin feature into particular select with class name .selectpickert.
After initialize Bootstrap Select Plugin now we want to submit value of selected multiple option to server, when we have directly submit value of this multiple select box then it will submit value of last selected option, so for submit value of all selected option we have to store value of select box into one hidden field and via value of this hidden field we can submit the value of multiple select box. So this way we can use Bootstrap Select Plugin for web development and we have also discuss how to submit the value of multiple option select box. So if you have develop application and you have want to assign multiple option with search feature then you can use this plugin which is very easy to use and you can also use this plugin with single selection option. So it depends on you how to use this plugin as per requirement.
Source Code
index.php
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | How to Use Bootstrap Select Plugin with PHP JQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.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.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
</head>
<body>
<br /><br />
<div class="container">
<br />
<h2 align="center">How to Use Bootstrap Select Plugin with PHP JQuery</h2>
<br />
<div class="col-md-4" style="margin-left:200px;">
<form method="post" id="multiple_select_form">
<select name="framework" id="framework" class="form-control selectpicker" data-live-search="true" multiple>
<option value="Laravel">Laravel</option>
<option value="Symfony">Symfony</option>
<option value="Codeigniter">Codeigniter</option>
<option value="CakePHP">CakePHP</option>
<option value="Zend">Zend</option>
<option value="Yii">Yii</option>
<option value="Slim">Slim</option>
</select>
<br /><br />
<input type="hidden" name="hidden_framework" id="hidden_framework" />
<input type="submit" name="submit" class="btn btn-info" value="Submit" />
</form>
<br />
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('.selectpicker').selectpicker();
$('#framework').change(function(){
$('#hidden_framework').val($('#framework').val());
});
$('#multiple_select_form').on('submit', function(event){
event.preventDefault();
if($('#framework').val() != '')
{
var form_data = $(this).serialize();
$.ajax({
url:"insert.php",
method:"POST",
data:form_data,
success:function(data)
{
//console.log(data);
$('#hidden_framework').val('');
$('.selectpicker').selectpicker('val', '');
alert(data);
}
})
}
else
{
alert("Please select framework");
return false;
}
});
});
</script>
insert.php
<?php
//insert.php
/*echo $_POST["framework"];
echo '<br />';
echo $_POST["hidden_framework"];*/
$connect = mysqli_connect("localhost", "root", "", "testing");
$query = "INSERT INTO like_table(framework) VALUES ('".$_POST["hidden_framework"]."')";
if(mysqli_query($connect, $query))
{
echo 'Data Inserted';
}
?>
Gran video.
ReplyDeleteMuy clara la explicación.
Thank you so much.
ReplyDeletehello, its working but when i tried entering other form data like name, phone no it only submitted the framework data to the database..is there a way we can add additional inputs on the same form
ReplyDeletethis is so great you have helped me so much in my project
ReplyDeleteHello, I successfully inserted data but the rest of my form data was not inserted like username and registration number.. How can I do it
ReplyDeleteHow does one add other inputs like username and email. The drop down data is being saved to the database but no other information is
ReplyDelete