Dynamically Add / Remove input fields in PHP with Jquery Ajax

Dynamically Add / Remove input fields in PHP with Jquery Ajax

File name : index.php

<html>
<head>
<title>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">
<br />
<br />
<h2 align="center">Dynamically Add or Remove input fields in PHP with JQuery</h2>
<div class="form-group">
<form name="add_name" id="add_name">
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td><input type="text" name="name[]" placeholder="Enter your Name" 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="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="name[]" placeholder="Enter your Name" 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();
});
$('#submit').click(function(){
$.ajax({
url:"name.php",
method:"POST",
data:$('#add_name').serialize(),
success:function(data)
{
alert(data);
$('#add_name')[0].reset();
}
});
});
});
</script>

name.php

File name : name.php

<?php
$connect = mysqli_connect("localhost", "root", "", "test_db");
$number = count($_POST["name"]);
if($number > 0)
{
for($i=0; $i<$number; $i++)
{
if(trim($_POST["name"][$i] != ''))
{
$sql = "INSERT INTO tbl_name(name) VALUES('".mysqli_real_escape_string($connect, $_POST["name"][$i])."')";
mysqli_query($connect, $sql);
}
}
echo "Data Inserted";
}
else
{
echo "Please Enter Name";
}
?>

Example 2

Add or remove more text field using jquery and ajax

File name : index.php

<html>
<head>
<title>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>

<table class="table" id="dynamic_field"><br/><br/>
<thead>
<tr>
<th style="width:30%;">Product</th>
<th style="width:20%;">Rate</th>
<th style="width:15%;">Quantity</th>
<th style="width:15%;">Total</th>
<th style="width:10%;">Action</th>
<th style="width:10%;"><div style="float: right;">
<button type="button" name="add" id="add" class="btn btn-primary">
<i class="glyphicon glyphicon-plus-sign"></i>Add Order
</button>

</div></th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="form-group">
<select class="form-control select" name="product" id="product">
<option>--- Select ---</option>
<option>Option1</option>
</select>
</div>
</td>

<td><input type="text" class="form-control" name="rate" id="rate" readonly/></td>
<td><input type="text" class="form-control" name="quantity" id="quantity" /></td>
<td><input type="text" class="form-control" name="total" id="total" readonly/></td>
<td></td>
</tr>
</tbody>
</table>

</body>
</html>

jquery script

File name : script.php

<script>
$(document).ready(function(){
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><select class="form-control select" name="product"><option>--- select ---</option></select></td><td><input type="text" name="rate[]" placeholder="Enter your Rate" class="form-control name_list" /></td><td><input type="text" name="quantity[]" placeholder="Enter your quantity" class="form-control name_list" /></td><td><input type="text" name="total[]" placeholder="Enter your Total" 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();
});


$('#submit').click(function(){
$.ajax({
url:"name.php",
method:"POST",
data:$('#add_name').serialize(),
success:function(data)
{
alert(data);
$('#add_name')[0].reset();
}
});
});
});
</script>

Example 3 :

File name : index.php

<div class="input_fields_container">
<div><input type="text" name="product_name[]">
<button class="btn btn-sm btn-primary add_more_button">Add More Fields</button>
</div>
</div>

<script>
$(document).ready(function() {
var max_fields_limit = 10; //set limit for maximum input fields
var x = 1; //initialize counter for text box
$('.add_more_button').click(function(e){ //click event on add more fields button having class add_more_button
e.preventDefault();
if(x < max_fields_limit){ //check conditions
x++; //counter increment
$('.input_fields_container').append('<div><input type="text" name="product_name[]"/><a href="#" class="remove_field" style="margin-left:10px;">Remove</a></div>'); //add input field
}
});
$('.input_fields_container').on("click",".remove_field", function(e){ //user click on remove text links
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>



You can get value of this fields in your PHP script by field name as you access normally but it return as an array after submitting form.


<?php
print '<pre>';
print_r($_REQUEST['product_name']);
print '</pre>';
//output of above script
Array
(
[0] => value of 1st index
[1] => value of 2nd index
[2] => value of 3rd index
)
?>





Previous Next


Trending Tutorials




Review & Rating

0.0 / 5

0 Review

5
(0)

4
(0)

3
(0)

2
(0)

1
(0)

Write Review Here