Question

我有一个带有动态字段的表单，但我希望其他字段具有不同的ID。

我的代码工作得很好，但是由于它是HTML代码的简单副本，因此没有任何ID的引用。我完全是Java语言的初学者，但我不知道该如何实现。

$(".addMore").click(function() {
  if ($('body').find('.field').length <= 10) {
    var fieldHTML = '<div class="form-group field">' + $(".fieldCopy").html() + '</div>';
    $('body').find('.field:last').after(fieldHTML);
  }
});

// Remove
$("body").on("click", ".remove", function() {
  $(this).parents(".field").remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="">
  <div class="form-group field">
    <div class="input-group">
      <input id="name" type="text" name="name[]" class="form-control" />
      <input id="email" type="text" name="email[]" class="form-control" />
      <div class="input-group-addon">
        <a href="javascript:void(0)" class="btn btn-success addMore">Add</a>
      </div>
    </div>
  </div>
  <input type="submit" name="submit" class="btn btn-primary" value="Submit" />
</form>

<!-- copy of input fields group -->
<div class="form-group fieldCopy" style="display: none;">
  <div class="input-group">
    <input id="name" type="text" name="name[]" class="form-control" />
    <input id="email" type="text" name="email[]" class="form-control" />
    <div class="input-group-addon">
      <a href="javascript:void(0)" class="btn btn-danger remove">Remove</a>
    </div>
  </div>
</div>

Answer 1

您可以这样设置：

var i = 0;
    $(".addMore").click(function() {
      if ($('body').find('.field').length <= 10) {
        var fieldHTML = '<div class="form-group field">' + $(".fieldCopy").html() + '</div>';
        $('body').find('.field:last').after(fieldHTML);
           $('body').find('.field:last').attr("id",i);
        i++
      }
    });

更改多个动态字段的ID

1 个答案: