How to Add or Remove Input Fields Dynamically Using jQuery?

Hello friends, today we will learn about how to add or remove input fields dynamically using jquery. We will take two examples, one with bootstrap and the second without bootstrap. Actually, both will be the same but just have changes in design and classes/id uses accordingly.

Dynamic input fields are a very good feature that allows users to submit multiple values of the same field reference. And you will get all the values in the backend from the same input field. You can easily integrate this feature using jquery and add or remove fields dynamically.

So we will make a simple form that has an input field then we will add a button for addition to append a new input field. Besides this new input field, we will add a deletion button to remove that specific input field. And it will continue as we had set up the limit of addition.

So let’s have a look at how we can integrate dynamic input fields to generate multiple input fields and get the values at the backend. In this example, we will use PHP language to get the values in the backend. You can store these values in a database or you can use them as you want.

Add or Remove Input Fields Using jQuery

In this method, we will make our dynamic code for adding or removing input fields in jquery and will use a simple HTML form without styling. It is just for example but you can style as per your requirements.

The first thing you have to make sure your web page has a jquery.min.js included to run the jquery code script. If it is not included then you have to add it to your web page. You can have it from the following link.

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

Also Read: How to Add jQuery Script to WordPress?

Now, we will make an HTML form that has one input field and one button to add more input fields. You will click on that button then a new input field will append next to the first input field.

HTML Code

<form class="form-wrapper">
    <div>
        <input type="text" name="name[]" value="">
        <button class="add-button" title="Add field">Add</button>
    </div>
</form>

Now, we will create jquery functionality to append a new input field when clicked on the add more button. You can add this script code into your separate script.js file or you can add it in the footer. See the following jquery code.

jQuery Code

<script>

	jQuery(document).ready(function(){
	    var maxLimit = 5;
	    var appendHTML = '<div><input type="text" name="name[]" value=""><button class="remove-button" title="Remove field">Remove</button></div>'

	    var x = 1;
	    
	    // for addition
	    jQuery('.add-button').click(function(e){
	    	e.preventDefault();
	        if(x < maxLimit){ 
	            jQuery('.form-wrapper').append(appendHTML);
	            x++;
	        }
	    });
	    
	    // for deletion
	    jQuery('.form-wrapper').on('click', '.remove-button', function(e){
	        e.preventDefault();
	        jQuery(this).parent('div').remove();
	        x--;
	    });
	});

</script>

As you can see above, we made two click functions one for append a new input field in the form wrapper and the second for removing the specific input field.

First, we declare the maximum number limit of input field addition. When you reached the limit it will not add more input fields, you can change it as you want.

Next, we have a variable holding the HTML content which we want to append, we will use this content while appending. Then we have two functions for addition and deletion. You can check the working example demo at the end of the tutorial.

Add or Remove Input Fields Using jQuery and Bootstrap

In this case, we will use the same code reference but will use bootstrap to style the input fields and form. There will be a little bit of change with the class’s name as appropriate.

I’m sure you are familiar with bootstrap. It is a very popular CSS framework to design the standard web page and has very much flexibility to use it. It is mobile responsive as well and you don’t need to worry about the mobile design.

So let’s see the code HTML code block of bootstrap.

HTML Code

<form action="" class="bs-form-wrapper">
  
    <div class="input-group control-group input-wrapper">  
        <input type="text" name="name[]" class="form-control" placeholder="Enter value here">  
        <div class="input-group-btn">   
            <button class="btn btn-success bs-add-button" type="button"><i class="fa fa-plus"></i> Add</button>  
        </div>  
    </div>  

</form>

Using the above code, you can see you have a very good design of a web page with mobile responsiveness. You can change the design as per your requirements. Check the bootstrap documentation here.

Now let’s add the same jquery code function but have little change in the append HTML content and targeting the element while clicking on buttons. See the following jquery code for bootstrap HTML.

jQuery Code

<script>
jQuery(document).ready(function(){
    var maxLimit = 5;
    var appendHTML = '<div class="input-group control-group input-wrapper mt-2"><input type="text" name="name[]" class="form-control" placeholder="Enter value here"><div class="input-group-btn"><button class="btn btn-danger bs-remove-button" type="button"><i class="fa fa-minus"></i> Remove</button></div></div>'; 
    var x = 1;
    
    // for addition
    jQuery('.bs-add-button').click(function(e){
    	e.preventDefault();
        if(x < maxLimit){ 
            jQuery('.bs-form-wrapper').append(appendHTML);
            x++;
        }
    });
    
    // for deletion
    jQuery('.bs-form-wrapper').on('click', '.bs-remove-button', function(e){
        e.preventDefault();
        jQuery(this).parents('.input-wrapper').remove();
        x--;
    });
});
</script>

So, you see the above code has little changes, so now you can copy this code and add it in your script file or you can add it in the footer of the web page.

Now let’s see how we can get the values of these multiple input fields at the backend using the PHP code.

Get Multiple Input Fields Values Using PHP

So, in the above examples, you see how to add or remove the input fields dynamically using the jquery code script and now we will see how to get these values in PHP.

Also Read: Most Useful PHP Array Functions

We will use the $_POST global PHP variable to get the values of all requests sent by the form. To get the value in PHP you just have to pass the field name in this variable. See the following syntax of $_POST.

$_POST['field_name']

Get the multiple fields values of the above code example.

$values = $_POST['name'];

To check the value, use the print_r() function.

print_r($values);

Output:

Array
(
    [0] => value1
    [1] => value2
    [2] => value3
    [3] => value4
)

Now you can use these values as you want. Use the foreach loop to insert the values into the database or wherever you want to use them.

$values = $_POST['name'];

foreach($values as $value) {
    // database query
    echo $value;
}

Also Read: How to Replace String, Text or HTML in jQuery?

Conclusion

So in this tutorial, you learned how to add or remove the input fields dynamically using jquery. We also had a look at the two examples one with simple HTML form and the second with bootstrap styling for a good look and feel.

We also learned about how to get multiple input fields values in PHP even these are dynamic input fields. So you can get these values in PHP and use them to insert them into a database or anywhere else where you would like.

Hope you understand all points and liked the tutorial, so please share it with your friends to support us. If you have any queries please ask me in the comment section, I’ll respond to you as soon as possible.