Hi, This is our new post and in this post we will learn how to integrate Bootstrap tokenfield plugin for tag within our system and how to insert that Bootstrap tokenfield data into Mysql table by using PHP script with JQuery Ajax. We all know Tags are used define content in group and organize that content with different part. If you have used wordpress and it has been provies tags option for define content into different group. So here we have also learn something about tag, for make wordpress type tag taxonomy we have use Bootstrap Tokenfield plugin with Jquery UI autocomplete widget.
In this post we will applied Bootstrap Tokenfield tags to input type textbox, so when ever user has come for enter his particular data then JQuery UI autocomplete will load pre populated list of stored data and from that list user can select his proper option. After selecting option that data will be converted into stylish tag. We can also remove tag by clicking on remove buttong, every tag has it's own remove button, so we can remove particular tag by clicking on remove button and it will be remove from textbox.
So here we will make simple form in which user can enter his or her name and they can also enter his or her skill, while they have come into Skill textbox, then this plugin will activate and load pre populated list of data and user can select proper option. After this we will insert that form data into Mysql table by using Ajax JQuery with PHP. We can enter more than one tag data at time by using this plugin. In table tag data will be stored in string format with every tag will be comma seperated. This all things we have discuss in this post. So, I hope you can something new from this post. Below you can find complete source code and online demo also.
Source Code
index.php
<?php
//index.php
?>
<!DOCTYPE html>
<html>
<head>
<title>How to Store Form data in CSV File using PHP</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" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.js"></script>
</head>
<body>
<br />
<div class="container">
<div class="row">
<h2 align="center">Insert Bootstrap Tokenfield Tag Data using PHP Ajax</h2>
<br />
<div class="col-md-6" style="margin:0 auto; float:none;">
<span id="success_message"></span>
<form method="post" id="programmer_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>Enter your Skill</label>
<input type="text" name="skill" id="skill" class="form-control" />
</div>
<div class="form-group">
<input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#skill').tokenfield({
autocomplete:{
source: ['PHP','Codeigniter','HTML','JQuery','Javascript','CSS','Laravel','CakePHP','Symfony','Yii 2','Phalcon','Zend','Slim','FuelPHP','PHPixie','Mysql'],
delay:100
},
showAutocompleteOnFocus: true
});
$('#programmer_form').on('submit', function(event){
event.preventDefault();
if($.trim($('#name').val()).length == 0)
{
alert("Please Enter Your Name");
return false;
}
else if($.trim($('#skill').val()).length == 0)
{
alert("Please Enter Atleast one Skill");
return false;
}
else
{
var form_data = $(this).serialize();
$('#submit').attr("disabled","disabled");
$.ajax({
url:"insert.php",
method:"POST",
data:form_data,
beforeSend:function(){
$('#submit').val('Submitting...');
},
success:function(data){
if(data != '')
{
$('#name').val('');
$('#skill').tokenfield('setTokens',[]);
$('#success_message').html(data);
$('#submit').attr("disabled", false);
$('#submit').val('Submit');
}
}
});
setInterval(function(){
$('#success_message').html('');
}, 5000);
}
});
});
</script>
insert.php
<?php
//insert.php
if(isset($_POST["name"]))
{
$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");
$query = "INSERT INTO programmer(name, skill) VALUES(:name, :skill)";
$statement = $connect->prepare($query);
$statement->execute(
array(
':name' => $_POST["name"],
':skill' => $_POST["skill"]
)
);
$result = $statement->fetchAll();
$output = '';
if(isset($result))
{
$output = '
<div class="alert alert-success">
Your data has been successfully saved into System
</div>
';
}
echo $output;
}
?>
Database
--
-- Database: `testing`
--
-- --------------------------------------------------------
--
-- Table structure for table `programmer`
--
CREATE TABLE IF NOT EXISTS `programmer` (
`id` int(11) NOT NULL,
`name` varchar(250) NOT NULL,
`skill` text NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=latin1;
--
-- Indexes for table `programmer`
--
ALTER TABLE `programmer`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `programmer`
--
ALTER TABLE `programmer`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=1;
Thank you a lot man, But we have one problem here. When you typing in "Skill" field and hit enter for the one you'd like to chose, it'll duplicate the value in "Skill" field. How could we fix that problem. Hope to get your feedback soon. Thank a lot
ReplyDeleteThis is a very good Tutorial, thanks.
ReplyDeleteI will like you to assist me. I need to dynamically add value from database to the tagsinput field... Please advice.
Hi, did you receive any answers ? I'm a lot interested too.
DeleteHow about updating the records? How can I retrieve the records from database to the form?
ReplyDeleteHi Sir,
ReplyDeleteMany thanks for this wonderful video, I like all your videos and it helps me very much. I want to ask you how we can make a new insert for each Skill member? It means if user select 3 values on skill field then we need to insert 3 records to table. Can you help me?
can you help with missing part from your lesson edit.php i try to feth the keywords into in put field but i failed for edit the tags
ReplyDeletesource: ['PHP','Codeigniter','HTML','JQuery','Javascript','CSS','Laravel','CakePHP','Symfony','Yii 2','Phalcon','Zend','Slim','FuelPHP','PHPixie','Mysql'],
ReplyDeletehow to get list this from database and input to database to other tabel ?
Hi, did you receive any answers ? I'm a lot interested too.
Deleteif i want to search in this and preview result then what to do
ReplyDeleteFatal error: Uncaught PDOException: SQLSTATE[HY000]: General error in D:\xampp\htdocs\Insert Bootstrap Tokenfield Tag Data using PHP Ajax\insert.php:15 Stack trace: #0 D:\xampp\htdocs\Insert Bootstrap Tokenfield Tag Data using PHP Ajax\insert.php(15): PDOStatement->fetchAll() #1 {main} thrown in D:\xampp\htdocs\Insert Bootstrap Tokenfield Tag Data using PHP Ajax\insert.php on line 15
ReplyDeleteEnter Name