How to Dynamically Add / Remove input fields in PHP with Jquery Ajax
In tutorial we will learn how to How to Dynamically Add / Remove input fields in PHP with Jquery Ajax and insert data in to the database.
First create a HTML form with one filed and a submit button.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<form name="add_name" id="add_name" method="post"> <div class="table-responsive"> <table class="table table-bordered" id="dynamic_field"> <tr> <td><input type="text" name="skill[]" placeholder="Enter your Skill" class="form-control name_list" /></td> <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td> </tr> </table> <input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" /> </div> </form> |
Jquery for Add/ remove field
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> $(document).ready(function(){ var i=1; $('#add').click(function(){ i++; $('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="skill[]" placeholder="Enter your Skill" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>'); }); $(document).on('click', '.btn_remove', function(){ var button_id = $(this).attr("id"); $('#row'+button_id+'').remove(); }); }); </script> |
Now create MySQL table tblskills. Table tblskills structure given below
|
1 2 3 4 |
CREATE TABLE `tblskills` ( `id` int(11) NOT NULL, `skill` varchar(250) NOT NULL ) ENGINE=MyISAM DEFAULT CHARSET=latin1; |
Create database connection file (config.php)
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php define('DB_SERVER','localhost'); define('DB_USER','root'); define('DB_PASS' ,''); define('DB_NAME', 'practice'); $con = mysqli_connect(DB_SERVER,DB_USER,DB_PASS,DB_NAME); // Check connection if (mysqli_connect_errno()) { echo "Failed to connect to MySQL: " . mysqli_connect_error(); } ?> |
Code for Data insertion into the database.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?php //Databse connection file include('config.php'); if(isset($_POST['submit'])) { // Counting No fo skilss $count = count($_POST["skill"]); //Getting post values $skill=$_POST["skill"]; if($count > 1) { for($i=0; $i<$count; $i++) { if(trim($_POST["skill"][$i] != '')) { $sql =mysqli_query($con,"INSERT INTO tblskills(skill) VALUES('$skill[$i]')"); } } echo "<script>alert('Skills inserted successfully');</script>"; } else { echo "<script>alert('Please enter skill');</script>"; } } ?> |
Here is the full code that we have written for index.php page:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<?php //Database connection file include('config.php'); if(isset($_POST['submit'])) { // Counting No fo skilss $count = count($_POST["skill"]); //Getting post values $skill=$_POST["skill"]; if($count > 1) { for($i=0; $i<$count; $i++) { if(trim($_POST["skill"][$i] != '')) { $sql =mysqli_query($con,"INSERT INTO tblskills(skill) VALUES('$skill[$i]')"); } } echo "<script>alert('Skills inserted successfully');</script>"; } else { echo "<script>alert('Please enter skill');</script>"; } } ?> <html> <head> <title>PHPGurukul Programmin Blog | Dynamically Add or Remove input fields in PHP with JQuery</title> <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.6/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> </head> <body> <div class="container"> <h2 align="center">Dynamically Add or Remove input fields in PHP with JQuery</h2><br /> <div class="form-group"> <form name="add_name" id="add_name" method="post"> <div class="table-responsive"> <table class="table table-bordered" id="dynamic_field"> <tr> <td><input type="text" name="skill[]" placeholder="Enter your Skill" class="form-control name_list" /></td> <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td> </tr> </table> <input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" /> </div> </form> </div> </div> </body> <script> $(document).ready(function(){ var i=1; $('#add').click(function(){ i++; $('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="skill[]" placeholder="Enter your Skill" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>'); }); $(document).on('click', '.btn_remove', function(){ var button_id = $(this).attr("id"); $('#row'+button_id+'').remove(); }); }); </script> </html> |
Source code of Dynamically Add / Remove input fields in PHP with Jquery Ajax
