Morioh
Login
Iliana Welch

Iliana Welch

1 year ago

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
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

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

config.php

<?php
// 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();
exit();
}

?>

Make HTML File index page, jQuery & AJAX code

index.php

<!DOCTYPE html>
<html lang="en">
<head>
<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">
</head>
<body>

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

<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">
<tr>
<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>
</tr>
</table>
<input type="submit" class="btn btn-success" name="submit" id="submit" value="Submit">
</form>
</div>
</div>
<div class="col-md-1"></div>
</div>
</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>
</body>
</html>

<script type="text/javascript">
$(document).ready(function(){

var i = 1;

$("#add").click(function(){
i++;
$('#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");
$('#row'+button_id+'').remove();
});

$("#submit").on('click',function(){
var formdata = $("#member_nm").serialize();
$.ajax({
url :"action.php",
type :"POST",
data :formdata,
cache :false,
success:function(result){
alert(result);
$("#member_nm")[0].reset();
}
});
});
});
</script>

Make a PHP code file

action.php

<?php

include_once('config.php');

$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";
}else{
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