In this tutorial, We are going learn How can we generate dynamic html fields by using Jquery plugin and insert dynamic generated html fields data into Mysql table by using PHP with Ajax. Here we have use Jquery repeater plugin for generate dynamic input fields with add more and remove button in HTML form. When we have work on my project then in that we want to require to generate dynamic html of 10 input fields in my form. So, at that time we have write jquery code for generate dynamic html fields, after write number of lines of jquery code we have make to generate 10 dynamic html fields. But after that our website speed has been down. So at that time we have search some jquery plugin which help us to generate dynamic html fields. So we have found this jquery repeater pluging. By using this plugin we can easily add or remove dynamic html fields in our form.
So, here we have share this tutorial for those web developer who has working on forms with multiple input fields. For Insert multiple input fields that we want to dynamically generate input fields by writing many number of lines of jquery code depends on our input fields requirement. But by using this jquery repeater plugin this type of generating dynamic html fields process will become much easier. This JQuery plugin is also very useful for adding multiple form items in PHP because it will generate same name which we have define under data-name attribute. So, in this post we have describe how can we have use this plugin for generating input fields dynamically in a form and submit that dynamically genetated input fields values into database by using Ajax with PHP.
If we want to make functionality like generate dynamic html input fields in our form then by using this plugin we can make this feature by writing very short code. We can add or remove dynamically generated input fields very easily. After this we want to process that multiple fields and insert into mysql table. For this we have use Ajax request, by using ajax request we have submit dynamic generated html input fields data to php script. So, by using ajax we can insert dynamic input fields data into mysql table without refresh of web page and after inserting multiple input fields data into database then form will be clear. So, in this tutorial we have seen how to generate dynamic input fields by using Jquery repeater plugin and insert into mysql by using Ajax with PHP.
Source Code
index.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Add Remove Dynamic HTML Fields using JQuery Plugin in PHP</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="repeater.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<br />
<h3 align="center">Add Remove Dynamic HTML Fields using JQuery Plugin in PHP</h3>
<br />
<div style="width:100%; max-width: 600px; margin:0 auto;">
<div class="panel panel-default">
<div class="panel-heading">Add Programming Skill Details</div>
<div class="panel-body">
<span id="success_result"></span>
<form method="post" id="repeater_form">
<div class="form-group">
<label>Enter Programmer Name</label>
<input type="text" name="name" id="name" class="form-control" required />
</div>
<div id="repeater">
<div class="repeater-heading" align="right">
<button type="button" class="btn btn-primary repeater-add-btn">Add More Skill</button>
</div>
<div class="clearfix"></div>
<div class="items" data-group="programming_languages">
<div class="item-content">
<div class="form-group">
<div class="row">
<div class="col-md-9">
<label>Select Programming Skill</label>
<select class="form-control" data-skip-name="true" data-name="skill[]" required>
<option value="">Select</option>
<option value="PHP">PHP</option>
<option value="Mysql">Mysql</option>
<option value="JQuery">JQuery</option>
<option value="Ajax">Ajax</option>
<option value="AngularJS">AngularJS</option>
<option value="Codeigniter">Codeigniter</option>
<option value="Laravel">Laravel</option>
<option value="Bootstrap">Bootstrap</option>
</select>
</div>
<div class="col-md-3" style="margin-top:24px;" align="center">
<button id="remove-btn" class="btn btn-danger" onclick="$(this).parents('.items').remove()">Remove</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="form-group" align="center">
<br /><br />
<input type="submit" name="insert" class="btn btn-success" value="insert" />
</div>
</form>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#repeater").createRepeater();
$('#repeater_form').on('submit', function(event){
event.preventDefault();
$.ajax({
url:"insert.php",
method:"POST",
data:$(this).serialize(),
success:function(data)
{
$('#repeater_form')[0].reset();
$("#repeater").createRepeater();
$('#success_result').html(data);
/*setInterval(function(){
location.reload();
}, 3000);*/
}
});
});
});
</script>
</body>
</html>
insert.php
<?php
//insert.php
$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");
if(isset($_POST["name"]))
{
$skill = implode(", ", $_POST["skill"]);
$data = array(
':programmer_name' => $_POST["name"],
':programmer_skill' => $skill
);
$query = "
INSERT INTO programmer
(programmer_name, programmer_skill)
VALUES (:programmer_name, :programmer_skill)
";
$statement = $connect->prepare($query);
if($statement->execute($data))
{
echo '
<div class="alert alert-success">
Data Successfully Inserted
</div>
';
}
}
?>
Database
--
-- Database: `testing`
--
-- --------------------------------------------------------
--
-- Table structure for table `programmer`
--
CREATE TABLE `programmer` (
`programmer_id` int(11) NOT NULL,
`programmer_name` varchar(200) NOT NULL,
`programmer_skill` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `programmer`
--
INSERT INTO `programmer` (`programmer_id`, `programmer_name`, `programmer_skill`) VALUES
(1, 'John Smith', 'PHP, Mysql'),
(2, 'Peter Parker', 'Codeigniter, JQuery, Ajax, AngularJS'),
(3, 'Andrew Lee', 'PHP, Codeigniter, Laravel');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `programmer`
--
ALTER TABLE `programmer`
ADD PRIMARY KEY (`programmer_id`);
Great Article.
ReplyDeleteNow start your blog with a bang. Visit Bloggersutra.com
thanks
ReplyDeleteExcelent!!!
ReplyDeleteVery nice!!!
ReplyDeleteHey Can WE also Pass the Img with serialize() ? i used that but its not working for me can you make it for img also
ReplyDeleteIs there any way to make the selects dynamic from a MYSQL database?
ReplyDeletehello!
ReplyDeletehow i can put more then one element in one item?
Hi,
ReplyDeleteIs it possible to move the "Add more Skill" button to the bottom of the form? Next to Insert.
Have you found an answer? Please let me know
Deleteplease help
ReplyDeletehow to edit this field
Thankyou. Its working.
ReplyDeletethanx
ReplyDelete