How to add and remove textbox dynamically in JavaScript

Dynamically add textbox on button click javascript

Hi Guys,

  If you want to add fields dynamically to your HTML page using javascript then you can use the below code. 

Here we are showing how to add and remove textbox dynamically in javascript.                       

It's an example of how to dynamically add textbox on button click javascript.

Let's Start 

    Open your favorite text editor. We have some suggestions for the best code editor for javascript/PHP.

JQUERY FILE

<script type="text/javascript">
$(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> <br> <br> <br> </div>'); //add input box
        }
    });
   
    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});
</script>

 

HTML FILE

1 2 3 4

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

If you read comment lines carefully, the process is pretty straightforward. We start with 1 input field and let the user add more fields until the count reaches maximum. The same process goes to the delete button, when clicked, it removes the current text field by removing the parent element, which is a div element.

tags ::    ,how-to-add-remove-textbox-dynamically-with-jquery-modified,dynamically add textbox on button click javascript,add multiple textbox dynamically using jquery,dynamically add multiple text boxes javascript,how to add textbox dynamically in table using javascript,how to change textbox value dynamically in javascript,javascript add multiple input fields dynamically