Add or Remove input field dynamically with jQuery

In this article we can discuss about Add or Remove input field dynamically with jQuery.

Add / Remove input field dynamically with jQuery

Add or Remove input field dynamically with jQuery

In our example, we will not just provide add button to add multiple input fields, but we will also provide a remove button with every input field. Using this button, users can delete any field at any time, which they don’t want.

we will also append the “add_field_button” class by adding the “copy” class div. If we need to change iron or text or anything in the “copy” class, we can easily do that by using this append class which is “add_field_button”.

The following example is very simple.

HTML CODE

<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
    <div><input type="text" name="mytext[]"></div>
</div>

jQuery Code

Below jQuery code insert in to your js file

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

Also Check out Here

If you interested in the Entertainment genre please check this also thebiographys.com

Related Posts

Leave a Reply

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