Create Bootstrap Tags Input with jQuery, PHP & MySQL

Bootstrap tags input is an input box that automatically convert typed text into tags or tokens when a certain key pressed like Enter Key or Comma. The tags input feature is very user friendly as it highlighted information right on the box and replaces conventional comma separated text in input box. You can implement Bootstrap tags input in your projects for the input box when you needed multiple details from a source like persons skills etc. So in this tutorial you will learn how to implement Bootstrap tags input with PHP and MySQL. The tutorial explained in easy steps with live demo and link to download source code.

As we have covered this tutorial with live demo to save a developer details with name and skills. So the file structure for the example is following.

• index.php


• save.php


• custom_tags_input.js

Steps1: Create Database Tables
As in this example, we will save details into MySQL database table. So first we will create MySQL database table developers to insert records.

CREATE TABLE `developers` (
`id` int(11) NOT NULL,
`name` varchar(255) NOT NULL,
`skills` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


Steps2: Inlucde Bootstrap and Tags Input Plugin Files
As in this tutorial we have used Bootstrap Tags input Plugin, so we will include Bootstrap, jQuery and Tags input plugin files in index.php
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script>
<script src="custom_tags_input.js"></script>


Steps3: Create Form with Tags Input
We will create a Form with Bootstrap tags input by using data-role="tagsinput" to create tags input.
<div class="container">
<h2>Create Bootstrap Tags Input with jQuery, PHP & MySQL</h2>
<form method="post" class="form-horizontal" action="save.php">
<div class="form-group">
<label class="col-xs-3 control-label">Name:</label>
<div class="col-xs-8">
<input type="text" id="name" name="name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Your Skills:</label>
<div class="col-xs-8">
<input type="text" id="skills" name="skills" data-role="tagsinput" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label"></label>
<div class="col-xs-8">
<input type="submit" name="submit" value="Save"/>
</div>
</div>
</form>
</div>


Steps4: Customize Bootstrap Tags Input
To create tags input, we need to use data-role="tagsinput" with input, the plugin converts input to work as tags input. The default keys which are (ENTER and comma) to create tags. But you can also customize plugin functionality using tags input plugin function below code. You can also set limit of maximum tags using maxTags
$('#skills').tagsinput({
confirmKeys: [13, 44],
maxTags: 20
});


Steps5: Save Tags input values
Now finally in save.php, we will save tags input values into MySQL database table with PHP.

<?php
include_once("db_connect.php");
if(isset($_POST['skills']) && isset($_POST['name'])) {
$name = $_POST['name'];
$skills = $_POST['skills'];
$insert_query = "INSERT INTO developers (name, skills) VALUES ('".$name."', '".$skills."')";
mysqli_query($conn, $insert_query) or die("database error: ". mysqli_error($conn));
echo "Your details saved successfully. Thanks!";
} else {
echo "Please Enter you name and skills!";
}
?>



You can view the live demo from the Demo link and can download the script from the Download link below.
Demo [sociallocker]Download[/sociallocker]