使用javascript中的按钮复制html表单字段行

Question

当我单击“添加行”按钮时，我试图复制整个表单域。出于某种原因，当我重新加载页面时，我尝试复制的第二行出现，并且单击“添加行”的按钮启动该功能也不起作用。我显然在这里做错了什么？

var counter = 0;

function moreFields() {
  counter++;
  var newFields = document.getElementById('readroot').cloneNode(true);
  newFields.id = '';
  newFields.style.display = 'row';
  var newField = newFields.childNodes;
  for (var i = 0; i < newField.length; i++) {
    var theName = newField[i].name
    if (theName)
      newField[i].name = theName + counter;
  }
  var insertHere = document.getElementById('writeroot');
  insertHere.parentNode.insertBefore(newFields, insertHere);
}
window.onload = moreFields;

<div class="row" id="readroot">

  <div class="col-lg-2">
    <div class="md-form form-sm new_row">
      <input type="text" name="fullname[]" placeholder="Full Name" class="form-control" required>
    </div>
  </div>
  <div class="col-lg-2">
    <div class="form-sm">
      <select name="gnation[]" id="national" class="mdb-select person-title grey-text" required>
        <option value="" disabled selected> Nationality </option>
        <option value="afghan">Afghan</option>
        <option value="albanian">Albanian</option>
        <option value="algerian">Algerian</option>
        <option value="american">American</option>
        <option value="andorran">Andorran</option>
        <option value="angolan">Angolan</option>
        <!-- a lot more -->
        <option value="zambian">Zambian</option>
        <option value="zimbabwean">Zimbabwean</option>
      </select>
      <label for="national"></label>
    </div>
  </div>
  <div class="col-lg-2">
    <div class="md-form form-sm new_row">
      <input type="text" name="contact[]" placeholder="Contact" class="form-control" required>
    </div>
  </div>
  <div class="col-lg-2">
    <div class="md-form form-sm new_row">
      <input type="text" name="gemail[]" placeholder="Email" class="form-control" required>
    </div>
  </div>
  <div class="col-lg-2">
    <div class="md-form form-sm new_row">
      <input type="text" name="gorganisation[]" placeholder="Organisation" class="form-control" required>
    </div>
  </div>
  <div class="col-lg-2">
    <div class="md-form form-sm">
      <a onclick="this.moreFields();" id="moreFields" class="btn btn-sm btn-primary waves-effect waves-light">Add Row</a>
    </div>
  </div>
</div>

<div class="row" id="writeroot"></div>

<input type="button" class="btn btn-sm btn-danger waves-effect waves-light pull-right" value="Remove" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">

Answer 1

有几个问题；

添加行有 id="morefields";在复制时，我们将有两个具有相同 id 的元素；这不好；

所以我在课堂上添加了更多字段；同样在添加新行时，脚本不知道已使用类“morefields”创建了新的 html 元素；

所以我将事件监听器放在一个函数中，并在两次调用它

1) 在页面加载时

2) 点击添加行（有一个小的超时）。

因此，当添加行时，会创建新行，并且“添加行”锚点与正确的事件侦听器绑定

var counter = 0;

//document.getElementById('moreFields').onclick = moreFields;

window.onload = loadEventListener();

function loadEventListener() {
  let addRowAnchorTags = document.getElementsByClassName('moreFields');

  for(i=0;i<addRowAnchorTags.length; i++) {
      addRowAnchorTags[i].onclick = moreFields;
  }
}

function moreFields() {
  counter++;
  var newFields = document.getElementById('readroot').cloneNode(true);
  newFields.id = '';
  newFields.style.display = 'row';
  var newField = newFields.childNodes;
  for (var i = 0; i < newField.length; i++) {
    var theName = newField[i].name
    if (theName)
      newField[i].name = theName + counter;
  }
  var insertHere = document.getElementById('writeroot');
  insertHere.parentNode.insertBefore(newFields, insertHere);
  setTimeout(function() {loadEventListener();})
}
//window.onload = moreFields;

<div class="row" id="readroot">

  <div class="col-lg-2">
    <div class="md-form form-sm new_row">
      <input type="text" name="fullname[]" placeholder="Full Name" class="form-control" required>
    </div>
  </div>
  <div class="col-lg-2">
    <div class="form-sm">
      <select name="gnation[]" id="national" class="mdb-select person-title grey-text" required>
        <option value="" disabled selected> Nationality </option>
        <option value="afghan">Afghan</option>
        <option value="albanian">Albanian</option>
        <option value="algerian">Algerian</option>
        <option value="american">American</option>
        <option value="andorran">Andorran</option>
        <option value="angolan">Angolan</option>
        <!-- a lot more -->
        <option value="zambian">Zambian</option>
        <option value="zimbabwean">Zimbabwean</option>
      </select>
      <label for="national"></label>
    </div>
  </div>
  <div class="col-lg-2">
    <div class="md-form form-sm new_row">
      <input type="text" name="contact[]" placeholder="Contact" class="form-control" required>
    </div>
  </div>
  <div class="col-lg-2">
    <div class="md-form form-sm new_row">
      <input type="text" name="gemail[]" placeholder="Email" class="form-control" required>
    </div>
  </div>
  <div class="col-lg-2">
    <div class="md-form form-sm new_row">
      <input type="text" name="gorganisation[]" placeholder="Organisation" class="form-control" required>
    </div>
  </div>
  <div class="col-lg-2">
    <div class="md-form form-sm">
      <a id="moreFields" class=" moreFields btn btn-sm btn-primary waves-effect waves-light">Add Row</a>
    </div>
  </div>
</div>

<div class="row" id="writeroot"></div>

<input type="button" class="btn btn-sm btn-danger waves-effect waves-light pull-right" value="Remove" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">