Add Remove Input Fields Dynamically using jQuery

Demo Download

Dynamically adding input fields are very helpful when working with a form. They are very good when you need to get multiple values of same field.

For example add education, add experience or add skills etc.

In these type of cases, we need multiple input fields. We can easily add and remove input fields dynamically using jQuery.

In this tutorial, i will show you how to add or remove input fields dynamically using jQuery, i will also show that how to get multiple values of these type of input fields using PHP.

After getting values of this input array, you can insert these values into database or you can perform any other operations on them. This is very useful script for adding and removing input fields dynamically using jQuery.

In this tutorial i am doing the following:

  1. Add remove input fields dynamically using jQuery
  2. Get multiple values of input array using PHP

1. Add remove input fields dynamically using jQuery

First we will need to create HTML form with the input field.

HTML

The above code will create a simple HTML form, you may noticed that i also placed  $array_values; before form, this is a PHP variable which will show the output of all input fields values. You do not need to display it, you can simply store these values in your database.

jQuery Library

We will need to add jQuery library, include jQuery library before the following jQuery script.

jQuery Script

The above jQuery script is handling the add and remove functionality of input field.

The  max_fields variable define the limit to add maximum number of input fields.

The  wrapper is the parent div of all input fields and it is used to select the parent div of input field.

The  add_button variable selects the button element.

The  x variable is used to define the initial counter, it will also increase or decrease by clicking the add or remove button to count the input fields.

When user click on Add More Fields button, it will check the maximum number of input fields to be added, if counter variable  x is less than  max_fields, then it will append new input field and remove link button into its parent div which is  wrapper and counter of input field will be incremented.

Similarly when user click on Remove button the relevant div of that input field is removed and counter of input field will be decremented.

2. Get multiple values of input array using PHP

To get the values of these input fields array, we will use PHP. Add the following PHP script in the header of your page before starting the  <html> tag.

Simple we are checking that  $_POST["input_array_name"]  is set and is it array, if it is true it will then passed into  array_filter($_POST["input_array_name"]); because it may be possible that use just add new field but do not enter value then this function will remove blank array value and provide you only filled array values. This is important when you are storing values in database because we do not want to waste our database table field with empty space.

After that i am storing all array values into variable  $array_values  which will display the output. We already print this with our HTML form.

To insert these values into database, run your MySqli query in  foreach() loop where i stored them in variable. You will also need to create a database connection and table before inserting. You can learn more about how to insert, view, edit and delete records from database using php and mysqli.

i have tried to explain each and every single step clearly, it you still have any query, kindly leave it in the below comment section. I will try to respond each and every query.

Demo Download

If you found this tutorial helpful, share it with your friends and developers group.

Article By
Javed Ur Rehman is a passionate blogger and web developer, he loves to share web development tutorials and blogging tips. He usually writes about HTML, CSS, JavaScript, Jquery, Ajax, PHP and MySQL.

Leave a Reply

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