Ajax Tutorial
- What is Ajax
- How Ajax Work
- ajax() and load() Function
- AJAX get() and post() Methods
- AJAX Function
- Ajax Success
- Ajax Button Click
- Ajax div load on button click
- Insert Data
- Delete Data
- User Registration
- ContactUs Form
- Check existing Password in Ajax and change the Password
- Ajax Search
- Ajax Serialize Insert
- Ajax without Searialize Insert
- Ajax User Check Availability
- Ajax OptionBox
- Ajax Dropdown Session
- dynamic text box Add/Remove
- Star Rating
- Pin Check Available
- Ajax Programs
- Clear Form Field after submitting form
- Loader load show / hide
- Multiple Functions
Customer Say
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
)
?>
File name : index.php
File name : index.php