How To Add/Remove Input Fields Dynamically with jQuery

by Nadeem Aslam

JQuery allows us  to add or duplicate more input fields dynamically by clicking add button. We can also remove the field by clicking on delete button. This jQuery snippet adds duplicate input fields dynamically and stops when it reaches maximum, i.e. we can set maximum limit of input fields which can be added by the user.

The process is pretty straight forward. We start with one input field and let user add more fields until the count reaches maximum. Same process works for delete button too. When clicked, it removes current text field by removing parent element, which is div element.

HTML:


<div class="items">

<div class="form-group"><label>Author Email:</label>
<input id="author_email" class="form-control" name="author" required="required" type="EMAIL" /></div>

</div>

<button type="button" class="add_field_button">Add Field</button>

First we have a single input box inside of a div with id of “items” and a button which says “Add Field”. When a user clicks add button, jquery function is called.

JQuery code is written as below:


$(document).ready(function() {
var max_fields = 20; //maximum input boxes allowed
var wrapper = $("#items"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID

var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('

<div class="form-group"><label for="title">Author Email:</label>' +
'<input class="form-control col-md-11" id="author_email" type="email" placeholder=""name="author"/>' +
'<a href="#" class="remove_field"><i class="fa fa-times"></a></div>

'); //add input box
}
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove field
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});

 

First we’re going to set a few variables:

  1. In the code above we have defined a variable max_fields which holds the value of maximum number of fields that can be added. We can set this value as desired like here it is set to 20.
  2. Next we have a variable named wrapper which holds id of container div that contains actual input which needs to be added.
  3. By third variable we access add field button.

Now, whenever user clicks on “Add Field” a new input field with delete button will be added to the container div. The same process goes on to add multiple number of input fields until the maximum limit set is reached.

jQuery – Removing a Form Element

When a delete button is clicked, corresponding input field is removed. To remove the added input fields, just write click function on remove button and inside this function just use parent() method to get parent element. Then use remove() method to remove added input box .

You can also add css to style input fields and Add/Remove buttons.

Also remember to include jquery library in your webpage:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

Using jquery  in a django template is the best and effective way to add dynamic fields into template form. I hope this was useful.

Drop me a comment if you have any queries.

To learn more about

Contact Us

One thought on “How To Add/Remove Input Fields Dynamically with jQuery”

Leave a Reply

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

Tools & Practices

Tools and Technologies we use at Applied

Contact us now

Popular Posts