Skip to main content

Add Fields Dynamically using jQuery and PHP

While implementing Forms, we sometimes need to add dynamic form input fields to increase user experience. So in this tutorial you will learn how to add and remove form input fields dynamically using jQuery. You will also learn to handle dynamically added fields value saves in database using PHP. The tutorial covered in very easy steps with live Demo and complete download script.

So let’s start the coding. We will have following file structure for this tutorial

  • index.php
  • add_fields.js
  • form_post.php

Steps1: Create Form with Add Field Buuton
In index.php, we will Form HTML add field button to add fields dynamically.
<form action="post_form.php" method="post">
<div class="field_wrapper">
<div>
<input type="text" name="input_field[]" value=""/>
<a href="javascript:void(0);" class="add_input_button" title="Add field"><img src="add-icon.png"/></a>
</div>
</div>
<input type="submit" name="save" value="Submit"/>
</form>

Steps2: JavaScript to Form Input Fields Dynamically
In add_fields.js , we will handle functionality to add input fields dynamically on button click. Also handle functionality to remove added input fields.
$(document).ready(function(){
var max_fields = 10;
var add_input_button = $('.add_input_button');
var field_wrapper = $('.field_wrapper');
var new_field_html = '<div><input type="text" name="input_field[]" value=""/><a href="javascript:void(0);" class="remove_input_button" title="Remove field"><img src="remove-icon.png"/></a></div>';
var input_count = 1;
// Add button dynamically
$(add_input_button).click(function(){
if(input_count < max_fields){
input_count++;
$(field_wrapper).append(new_field_html);
}
});
// Remove dynamically added button
$(field_wrapper).on('click', '.remove_input_button', function(e){
e.preventDefault();
$(this).parent('div').remove();
input_count--;
});
});

Steps3: Handle From Submit Value At Server End
Now finally in form_post.php, we will handle form submit input field value using PHP. You can add functionality to save Form values to database.
<?php
if(isset($_REQUEST['input_field'])){
print '<pre>';
print_r($_REQUEST['input_field']);
print '</pre>';
}
?>

You can view the live demo from the Demo link and can download the script from the Download link below.
Demo Download

One thought on “Add Fields Dynamically using jQuery and PHP

Leave a Reply

Your email address will not be published. Required fields are marked *

Shares

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!