html 克隆表单代码的一部分并增加输入的名称/是。

Posted 2021-05-11

jQuery(document).ready(function($) {
    var wrapper         = $(".input_fields_wrap div"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button Class/ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
          x++; //text box increment
          var name = $(wrapper).children('input').attr('name').replace('[new1]', '[new'+x+']');
          $(wrapper).last().clone()
          	.insertBefore(add_button).children('input').attr('name', name); //add input box
    });
});

<div class="input_fields_wrap">
    <div>
    	<input type="text" name="fields[contact][new1][fields][contactName]" /><br />
    	<input type="text" name="fields[contact][new1][fields][contactSurname]" /><br />
    	<input type="text" name="fields[contact][new1][fields][contactEmail]" />
    </div>
    <button class="add_field_button">Add More Fields</button>
</div>