How to Add or Remove Input Fields Dynamically Using jQuery?

How to Add/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.

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

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

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

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

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.

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.

Get the multiple fields values of the above code example.

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

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.

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.

You May Also Like

About the Author: Aman Mehra

Hey! I'm Aman Mehra and I'm a full-stack developer and have 5+ years of experience. I love coding and help to people with this blog.

Leave a Reply

Your email address will not be published.