--
-- Table structure for table `skills`
--
CREATE TABLE `skills` (
`id` int(11) NOT NULL,
`skillname` varchar(150) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `skills`
--
INSERT INTO `skills` (`id`, `skillname`) VALUES
(2, 'Python Flask'),
(3, 'Laravel'),
(4, 'Python Django'),
(5, 'Angular'),
(6, 'PHP'),
(7, 'Codeigniter'),
(8, 'Python TKinter'),
(9, 'JQuery'),
(10, 'Javascript'),
(11, 'CakePHP'),
(12, 'Mysql'),
(13, 'MongoDB'),
(14, 'Java'),
(15, 'Android Studio'),
(16, 'Bootstrap'),
(17, 'Java Swing'),
(18, 'NodeJS'),
(19, 'NodeJS Express');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `skills`
--
ALTER TABLE `skills`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `skills`
--
ALTER TABLE `skills`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=20;
--
-- Table structure for table `user`
--
CREATE TABLE `user` (
`id` int(11) NOT NULL,
`fullname` varchar(150) NOT NULL,
`skills` varchar(150) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `user`
--
INSERT INTO `user` (`id`, `fullname`, `skills`) VALUES
(1, 'Michael00000', 'Holz0000'),
(2, 'Paula', 'Wilson'),
(3, 'Antonio11111', 'Moreno11111'),
(4, 'cairocoders', 'NodeJS, NodeJS Express, CakePHP, Python Django');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `user`
--
ALTER TABLE `user`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `user`
--
ALTER TABLE `user`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;
JqueryUI Autocomplete : https://jqueryui.com/autocomplete/
Bootstrap Tokenfield : https://sliptree.github.io/bootstrap-tokenfield/
//index.php
<!DOCTYPE html>
<html>
<head>
<title>Insert Bootstrap Tokenfield Tag Data using PHP Mysql and Jquery Ajax</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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 Mysql and Jquery Ajax</h2>
<div class="col-md-6" style="margin:0 auto; float:none;">
<p id="success_message"></p>
<form method="post" id="reg_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>
<?php
include('dbcon.php');
$result = $conn->query("SELECT * FROM skills");
$result->fetch_all(MYSQLI_ASSOC);
?>
<script>
$(document).ready(function(){
$('#skill').tokenfield({
autocomplete:{
source: [<?php foreach($result as $row) { ?>
"<?php echo $row['skillname']; ?>",
<?php } ?>],
delay:100
},
showAutocompleteOnFocus: true
});
$('#reg_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>
</body>
</html>
insert.php
//insert.php
<?php
include('dbcon.php');
if(isset($_POST["name"]))
{
$fullname = $_POST["name"];
$skills = $_POST["skill"];
$sql = "INSERT INTO user(fullname,skills) VALUES ('$fullname','$skills')";
$insert = $conn->query($sql);
$output = '
<div class="alert alert-success">
Your data has been successfully saved
</div>
';
echo $output;
}
?>
