javascript - 动态添加两个表单字段到表单

Question

我想将名字和姓氏字段动态添加到我的表单中。目前我设法添加一个字段。但我怎样才能一次添加两个字段。

Ex: fname  lastname
    fname  lastname (X remove)
    fname  lastname (X remove)
    (+ add)

我的代码

html

下面是我的html代码

 <div class="input_fields_wrap">
   <div><input type="text" name="mytext[]"></div>  
    // I want to add another field with this
        </div>
         <button class="add_field_button">Add More Fields</button>

js

$(document).ready(function() {
    var max_fields      = 20; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); 
    var add_button      = $(".add_field_button"); 

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

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

Answer 1

这对你有用:-

    $(document).ready(function() {
    var max_fields      = 20; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); 
    var add_button      = $(".add_field_button"); 
    var fname_lname = '<div>First Name:- <input type="text" name="fname"/>Last Name:- <input type="text" name="fname"/><a href="#" class="remove_field">Remove</a></div>'

    var x = 1;
    $(add_button).click(function(e){ 
        e.preventDefault();
        if(x < max_fields){ 
            x++; //text box increment
            $(wrapper).append(fname_lname); 
        }
    });

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

检查 fiddle https://jsfiddle.net/dhruv1992/em1je2cu/