Add Remove input fields dynamically using jQuery demo

Posted 8 years ago By Ajay Gupta 273989

In this tutorial, I am going to tell you how to add dynamic fields in a form.

Here i write a script to add multiple input fields with remove button.

By clicking on remove links, related input field will be removed from list of fields easily.

By using jQuery for such type of activity it become much more easier.

You will know how to get value of this field in your PHP script after form submission.

In this script i set the limit on adding input field, you can add maximum 10 input fields but you can change as per your needs.

By default i start from single input field after that you can add more input fields by clicking on add more fileds button.

You need to include jquery library before going to use this script.

Script for add remove input fields dynamically

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

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

HTML

Here i add simple input field with add more button.

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

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

PHP

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

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

Show Demo

Add Remove input fields dynamically using jQuery

Tags :

Related Posts

How to validate form in jQuery using jQuery Form Validator

Powerful jQuery Bootstrap Form Validation with Example

jQuery Select box search option with Chosen and Bootstrap Plugins example

Validate multiple email addresses in single input text example

How to create divided multi-scrolling pages using jQuery Plugins

jQuery How To Fix the “$ is not a function” Error Using noConflict

Auto Load More Data on Page Scroll with jQuery and PHP Laravel

jQuery making custom right-click context menu example

jQuery - disable context menu right click, cut, copy and paste

jQuery remove query string parameter from url

Check and Uncheck all checkbox using jQuery Example

How to hide, show, or toggle your div with jQuery

How to select only one checkbox at a time in jquery example

How to get current url with or without query string example jQuery

Submit PHP Bootstrap Form without Page Refresh using jQuery, Ajax

Upload Multiple Images With Image Preview Using jQuery,Ajax And PHP

How to add or update query string parameter to current url in Javascript

Jquery Bootstrap Table Row Draggable Sortable and Resizable with Example

Bootstrap datepicker example text input with specifying date format

jQuery - set am/pm format using jQuery timepicker Plugin with example

Bootstrap year picker example using datepicker js plugin

How to get client ip address in javascript of jquery?

How to count number of characters limit in textarea Javascript

jQuery Fullcalendar Integration with example

Loading Gravatar image from email using JQuery

Laravel 5 - Autocomplete Mutiple Fields Using jQuery, Ajax and MySQL

Ajax Image Upload using PHP and jQuery Example Without Page Refresh with Validation

How to get local time from UTC using Moment.JS with example