Add and Remove Input Fields Dynamically with jQuery -

Sometimes we required to add multiple dynamic input fields in the project. For example, you need to make an online resume and want to add multiple skill values in online resume making and you have multiple skills to add on the resume. Then obviously there must be an option where you can add multiple dynamic input fields so that you can add multiple skils.

Dynamic input field allows you to add multiple values in a form. The Below code provides you an easy way to receive multiple inputs an HTML form. The dynamic input fields can be easily integrated using jQuery.

In this code snippet, you can set the maximum input field to be added and validate when it reaches maximum. The same process work with the delete option, when you click on the remove button, it will remove the input field one by one.

In this tutorial, we will show you how you can add or remove input fields or text boxes dynamically in an HTML form using jQuery and get multiple input fields values using PHP.

JavaScript Code:

Include the jQuery library in your page

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

The below code handle, add and remove input field in the form

<script type="text/javascript">
$(document).ready(function(){
    var maxField = 10; //Input fields increment limitation
    var addButton = $('.add_button'); //Add button selector
    var wrapper = $('.field_wrapper'); //Input field wrapper
    var fieldHTML = '<div><input type="text" name="field_name[]" value=""/><a href="javascript:void(0);" class="remove_button">Remove</a></div>'; //New input field html 
    var x = 1; //Initial field counter is 1
    
    //Once add button is clicked
    $(addButton).click(function(){
        //Check maximum number of input fields
        if(x < maxField){ 
            x++; //Increment field counter
            $(wrapper).append(fieldHTML); //Add field html
        }
    });
    
    //Once remove button is clicked
    $(wrapper).on('click', '.remove_button', function(e){
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
});
</script>

HTML Code

The following is the HTML code you need to use inside <body> tag. Though you can use it in form also.

<div class="field_wrapper">
    <div>
        <input type="text" name="field_name[]" value=""/>
        <a href="javascript:void(0);" class="add_button" title="Add field">Add More</a>
    </div>
</div>

Get Multiple Values in PHP

You would have noticed that I kept the name filed in an array. Because we are taking more that one value in the name, and for more that one value we use array.

Once the dynamic input form fields are added and submitted, then we have to receive these values in PHP for further use of data in the project. You can get the multiple values as an array using $_POST in PHP.

$field_values_array = $_POST['field_name'];

print_r($field_values_array);

// Output 
Array
(
    [0] => value1
    [1] => value2
    [2] => value3
)

After you fetched the multiple input fields values, use can use these values to insert in the database using foreach loop.

// Get multiple input field's value 
$field_values_array = $_POST['field_name'];

foreach($field_values_array as $value){
    // Your database query goes here
}

Output