Dynamicall将两个表单文件添加到表单中

Question

我希望动态地将fisrst名称和姓氏字段添加到我的表单中。 Currenltly我设法添加一个字段。但是我怎么能一次添加两个字段。

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

我的代码

HTML

下面的

是我的html代码ser

 <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

首先，我从你的javascript中删除了硬编码的HTML。然后，我将其移动到HIDDEN模板元素，并将其内部HTML加载为我的模板元素 - 通过这样做，我可以创建尽可能多的元素。

＆＃13;

＆＃13;

$(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) {
        // Here, I load the template's HTML
        var myFullTemplate = $(".fields-template").html();
        ''
        e.preventDefault();
        if (x < max_fields) {
          x++; //text box increment
          $(wrapper).append(myFullTemplate);
        } else {
          $(".add_field_button").hide();
        }
      });

      $(wrapper).on("click", ".remove_field", function(e) {
          e.preventDefault();
          $(this).parent('div').remove();
          x--;
          if ($(".add_field_button").is(":hidden")) {
              $(".add_field_button").show();
            }
          })
      });

＆＃13;

.fields-template {
  display: none;
}
label {
  font-weight: bolder;
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

<div class="fields-template">
  <div>
    <label for="fname">First name:</label>
    <input type="text" name="fname[]" />
    <label for="lname">Last name:</label>
    <input type="text" name="lname[]" /><a href="#" class="remove_field">Remove</a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

因此，要完成您在评论中提到的内容（删除两个字段而不是一个字段），只需编辑HTML模板以满足您的需求即可。此外，另一项更改：当您达到最大项目数时，隐藏添加按钮（当您删除一个时，它会再次显示）。

Answer 2

这对你有用： -

    $(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--;
    })
});

结帐小提琴 https://jsfiddle.net/dhruv1992/em1je2cu/