How To Add Together Or Duplicate Input Fields Dynamically Using Jquery?

If you lot are looking to add together as well as take away duplicate input fields, here's unopen to other jQuery representative below to produce the chore for you. This jQuery snippet adds duplicate input fields dynamically as well as stops when it reaches maximum allowed fields.

If you lot read comment lines carefully, the procedure is pretty forthwith forward. We offset amongst i input land as well as allow user add together to a greater extent than fields until the count reaches maximum. Same procedure goes to delete button, when clicked, it removes electrical current text land yesteryear removing the raise element, which is div element.

 $(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 push clitoris ID          var x = 1; //initlal text box count     $(add_button).click(function(e){ //on add together input push clitoris click         e.preventDefault();         if(x < max_fields){ //max input box allowed             x++; //text box growth             $(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 take away text         e.preventDefault(); $(this).parent('div').remove(); x--;     }) }); 

HTML Code
Here's HTML code you lot require to house inside BODY tag of your page, perchance inside a FORM tag.

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

We offset amongst unmarried Input land as well as a “Add to a greater extent than Field” push clitoris to allow user to add together to a greater extent than fields. The text input land is wrapped inward div element, equally explained above, on delete push clitoris click, it finds raise element, which is a div as well as removes it.

How to capture array values using PHP from these input fields as well as salvage it inward mysql inward my next post.

Source: Add/Remove Input Fields Dynamically amongst jQuery
Sumber http://developer-paradize.blogspot.com