Skip to main content

Add Remove Input Fields Dynamically with jQuery

Updated on: coderszine team jQuery, Tutorial

In our previous tutorial, we have explained how to implement Drag and Drop Reorder with jQuery, PHP & MySQL. In this tutorial, we will explain how to implement add and remove input fields dynamically with jQuery.

Add Remove input fields dynamically is a very user friendly feature in web applications that allows users to save more details of a subject like skills etc. The duplicate input fields are added and stops after reaching to maximum limit. There are also a remove button next to input field to remove dynamically added input fields.

The tutorial covered with live demo to add remove input fields and submit form to use input fields values. You can also link to download source code of live demo.

Also, read:

So let’s create example to add remove input fields dynamically with jQuery. The file structure for the example is following.

  • index.php
  • script.js
  • post_action.php
Steps1: Create Form HTML

First in index.php, we will create Form HTML with a input field and add button to add input fields.

<form action="post_action.php" method="post">
	<div class="input-wrapper">
		<div>
		<input type="text" name="field[]" value=""/>
		<a href="javascript:void(0);" class="add-input" title="Add input"><img src="add.png"/></a>
		</div>
	</div>
	<input type="submit" name="save" value="Submit"/>
</form>

wer will use below CSS for Form and input fields.

<style>
.input-wrapper div {
    margin-bottom: 10px;
}
.remove-input {
    margin-top: 10px;
    margin-left: 15px;
    vertical-align: text-bottom;
}
.add-input {
    margin-top: 10px;
    margin-left: 10px;
    vertical-align: text-bottom;
}
</style>
Steps2: Add and Remove Input Fields with jQuery

Now in script.js, we will handle functionality to add remove input fields dynamically using jQuery. We will create new input fields HTML with remove button and added new input fields when click add button. We have also set maximum input fields and checked when adding and remove fields.

$(document).ready(function(){
    var max_input_fields = 10;
    var add_input = $('.add-input');
    var input_wrapper = $('.input-wrapper');
    var new_input = '<div><input type="text" name="field[]" value=""/><a href="javascript:void(0);" class="remove-input" title="Remove input"><img src="remove.png"/></a></div>';
    var add_input_count = 1; 
	$(add_input).click(function(){
        if(add_input_count < max_input_fields){
            add_input_count++; 
            $(input_wrapper).append(new_input); 
        }
    });
	$(input_wrapper).on('click', '.remove-input', function(e){
        e.preventDefault();
        $(this).parent('div').remove();
        add_input_count--;
    });
});
Steps3: Form Submit Post Values

In post_action.php, we handle Form submit to use submitted Form input values.

<?php
if(isset($_REQUEST['field'])){		
	print_r($_REQUEST['field']);		
}
?>

You may also like:

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