How to Dynamically Add / Remove input fields in PHP with Jquery Ajax

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.

View Demo

First create a HTML form with one filed and a submit button.

<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

<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

CREATE TABLE `tblskills` (
  `id` int(11) NOT NULL,
  `skill` varchar(250) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Create database connection file (config.php)

<?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.

<?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:

<?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>
View Demo

Source code of Dynamically Add / Remove input fields in PHP with Jquery Ajax