Dynamically Add Multiple Input Fields with JQuery and PHP

SQL Query:

-- Database: `product_list`

-- Table structure for table `members`

CREATE TABLE `members` (
`id` int(11) NOT NULL,
`name` varchar(50) NOT NULL,
`email` varchar(50) NOT NULL

-- Dumping data for table `members`

INSERT INTO `members` (`id`, `first_name`, `email`) VALUES
(1, 'ayushi', 'ayushi989@domain_name.com'),
(2, 'mayur Dhameliya', 'mayur1995@domain_name.com'),
(3, 'krishna', 'krishna.king@domain_name.com'),
(4, 'bhavik', 'bhavik24@domain_name.com'),
(5, 'sejal', 'sejal98@domain_name.com');

Create Database connection with MySQL


// Database configuration
$hostname = "localhost";
$username = "application_v1";
$password = "";
$dbname = "product_list";

// Make database connection
$conn = mysqli_connect($hostname, $username, $password, $dbname);

// Check DB connection
if(mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();


Make HTML File index page, jQuery & AJAX code


<!DOCTYPE html>
<html lang="en">
<title>Dynamic add/remove input fields in PHP Jquery AJAX - www.pakainfo.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div class="card text-center" style="margin-bottom:50px;">
<h1>Dynamic Add/Remove input fields in PHP Jquery AJAX</h1>

<div class="container">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<div class="form-group">
<form name="member_nm" id="member_nm">
<table class="table table-bordered table-hover" id="addmore_row">
<td><input type="text" name="first_name[]" placeholder="Enter your Member Name" class="form-control member_list" /></td>
<td><input type="text" name="email[]" placeholder="Enter your Member Email" class="form-control name_email"/></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
<input type="submit" class="btn btn-success" name="submit" id="submit" value="Submit">
<div class="col-md-1"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script type="text/javascript">

var i = 1;

$('#addmore_row').append('<tr id="row'+i+'"><td><input type="text" name="first_name[]" placeholder="Enter your Name" class="form-control member_list"/></td><td><input type="text" name="email[]" placeholder="Enter your Email" class="form-control name_email"/></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");

var formdata = $("#member_nm").serialize();
url :"action.php",
type :"POST",
data :formdata,
cache :false,

Make a PHP code file




$memberData = count($_POST["first_name"]);

if ($memberData > 0) {
for ($i=0; $i < $memberData; $i++) {
if (trim($_POST['first_name'] != '') && trim($_POST['email'] != '')) {
$first_name = $_POST["first_name"][$i];
$email = $_POST["email"][$i];
$query = "INSERT INTO members (first_name,email) VALUES ('$first_name','$email')";
$result = mysqli_query($con, $query);
echo "Member Data inserted successfully";
echo "Please Enter member first_name";


I hope you get an idea about add/remove multiple input fields dynamically with jquery with validation.

#jquery #php 

Dynamically Add Multiple Input Fields with JQuery and PHP
1.00 GEEK