向表单添加新字段，名称属性保持不变

Question

我正在尝试创建一个功能来添加其他车主。为此，我需要两个功能，一个用于其他字段，第二个用于删除此字段。 我的表单包含两个字段集，一个用于汽车，另一个用于车主。我需要克隆并使用id="formCarOwner"插入div，但是我还必须更改name属性。我的解决方案无法复制该div的节点并添加数字以计数表单，因为它仅添加新字段且不更改name属性，因此无效。

formCounter = 1;

function addFields() {
  formCounter++;
  const formCarOwner = document.getElementById('formCarOwner');
  let formCarOwnerCopy = formCarOwner.cloneNode(true);
  formCarOwnerCopy.id += formCounter;

  for (i = 1; i < formCarOwnerCopy.childNodes.length; i += 2) {
    let formElements = formCarOwnerCopy.childNodes[i].querySelectorAll('input, select');

    for (let newElement of formElements) {
      formCarOwnerCopy.childNodes[i].name = newElement.name + formCounter;
    }
  }
  formCarOwner.parentNode.insertBefore(formCarOwnerCopy, formCarOwner);
}

var btn = document.getElementById('addFields')
btn.addEventListener('click', addFields)

<form name="form" method="post" id="forming">
  <div id="formCar" class="">
    <div><label class="lab required" for="form_brand">Marka samochodu</label><input type="text" id="form_brand" name="form[brand]" required="required"></div>
    <div><label class="lab required" for="form_model">Model</label><input type="text" id="form_model" name="form[model]" required="required"></div>
    <div><label class="lab required" for="form_engineCapacity">Pojemność silnika(cm^3)</label><input type="text" id="form_engineCapacity" name="form[engineCapacity]" required="required"></div>
    <div><label class="lab required">Data pierwszej rejestracji</label>
      <div id="form_firstRegistration">
        <select id="form_firstRegistration_year" name="form[firstRegistration][year]">
          <option value="2013">2013</option>
          <option value="2014">2014</option>
          <option value="2015">2015</option>
          <option value="2016">2016</option>
          <option value="2017">2017</option>
          <option value="2018">2018</option>
          <option value="2019">2019</option>
          <option value="2020">2020</option>
          <option value="2021">2021</option>
          <option value="2022">2022</option>
          <option value="2023">2023</option>
        </select>
        <select id="form_firstRegistration_month" name="form[firstRegistration][month]">
          <option value="1">Jan</option>
          <option value="2">Feb</option>
          <option value="3">Mar</option>
          <option value="4">Apr</option>
          <option value="5">May</option>
          <option value="6">Jun</option>
          <option value="7">Jul</option>
          <option value="8">Aug</option>
          <option value="9">Sep</option>
          <option value="10">Oct</option>
          <option value="11">Nov</option>
          <option value="12">Dec</option>
        </select>
        <select id="form_firstRegistration_day" name="form[firstRegistration][day]">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
          <option value="13">13</option>
          <option value="14">14</option>
          <option value="15">15</option>
          <option value="16">16</option>
          <option value="17">17</option>
          <option value="18">18</option>
          <option value="19">19</option>
          <option value="20">20</option>
          <option value="21">21</option>
          <option value="22">22</option>
          <option value="23">23</option>
          <option value="24">24</option>
          <option value="25">25</option>
          <option value="26">26</option>
          <option value="27">27</option>
          <option value="28">28</option>
          <option value="29">29</option>
          <option value="30">30</option>
          <option value="31">31</option>
        </select>
      </div>
    </div>
    <div><label class="lab required" for="form_meterStatus">Stan licznika</label><input type="text" id="form_meterStatus" name="form[meterStatus]" required="required"></div>
    <div><label class="lab required" for="form_vinNumber">Numer VIN(nadwozia)</label><input type="text" id="form_vinNumber" name="form[vinNumber]" required="required"></div>
    <div><label class="lab required" for="form_isForeign">Sprowadzony z zagranicy:</label><input type="checkbox" id="form_isForeign" name="form[isForeign]" required="required" value="1"></div>
  </div>

  <div class="" id="formCarOwner">
    <div><label class="lab required" for="form_name">Imie i nazwisko</label><input type="text" id="form_name" name="form[name]" required="required"></div>
    <div><label class="lab required" for="form_pesel">PESEL</label><input type="number" id="form_pesel" name="form[pesel]" required="required"></div>
    <div><label class="lab required" for="form_adress">Adres miejsca zarejestrowania pojazdu</label><input type="text" id="form_adress" name="form[adress]" required="required"></div>
    <div><label class="lab required" for="form_postalCode">Kod pocztowy</label><input type="text" id="form_postalCode" name="form[postalCode]" required="required"></div>
    <div><label class="lab required">Data uzyskania prawa jazdy</label>
      <div id="form_drivingLicence">
        <select id="form_drivingLicence_year" name="form[drivingLicence][year]">
          <option value="2013">2013</option>
          <option value="2014">2014</option>
          <option value="2015">2015</option>
          <option value="2016">2016</option>
          <option value="2017">2017</option>
          <option value="2018">2018</option>
          <option value="2019">2019</option>
          <option value="2020">2020</option>
          <option value="2021">2021</option>
          <option value="2022">2022</option>
          <option value="2023">2023</option>
        </select>
        <select id="form_drivingLicence_month" name="form[drivingLicence][month]">
          <option value="1">Jan</option>
          <option value="2">Feb</option>
          <option value="3">Mar</option>
          <option value="4">Apr</option>
          <option value="5">May</option>
          <option value="6">Jun</option>
          <option value="7">Jul</option>
          <option value="8">Aug</option>
          <option value="9">Sep</option>
          <option value="10">Oct</option>
          <option value="11">Nov</option>
          <option value="12">Dec</option>
        </select>
        <select id="form_drivingLicence_day" name="form[drivingLicence][day]">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
          <option value="13">13</option>
          <option value="14">14</option>
          <option value="15">15</option>
          <option value="16">16</option>
          <option value="17">17</option>
          <option value="18">18</option>
          <option value="19">19</option>
          <option value="20">20</option>
          <option value="21">21</option>
          <option value="22">22</option>
          <option value="23">23</option>
          <option value="24">24</option>
          <option value="25">25</option>
          <option value="26">26</option>
          <option value="27">27</option>
          <option value="28">28</option>
          <option value="29">29</option>
          <option value="30">30</option>
          <option value="31">31</option>
        </select>
      </div>
    </div>
  </div>

  <input type="button" id="addFields" value="+">
  <input type="button" id="removeFields" value="-" style="display: none;">
  <input type="submit">
</form>

Answer 1

不需要两个循环，您可以像这样使用foreach遍历新的表单副本字段：

formCarOwnerCopy.querySelectorAll('input, select').forEach(function(field) {
    field.name += formCounter;
});

尽管在使用数组时，您只是不能在名称后添加数字。一种方法是使用RegEx并替换当前索引：

field.name = field.name.replace(/form/, 'form[' + formCounter + ']');

formCounter = 1;

function addFields() {
  formCounter++;
  const formCarOwner = document.getElementById('formCarOwner');
  let formCarOwnerCopy = formCarOwner.cloneNode(true);
  formCarOwnerCopy.id += formCounter;

  formCarOwnerCopy.querySelectorAll('input, select').forEach(function(field) {
    field.name = field.name.replace(/form/, 'form[' + formCounter + ']');
  });

  formCarOwner.parentNode.insertBefore(formCarOwnerCopy, formCarOwner);
}

var btn = document.getElementById('addFields')
btn.addEventListener('click', addFields);

<form name="form" method="post" id="forming">
  <div id="formCar" class="">
    <div><label class="lab required" for="form_brand">Marka samochodu</label><input type="text" id="form_brand" name="form[brand]" required="required"></div>
    <div><label class="lab required" for="form_model">Model</label><input type="text" id="form_model" name="form[model]" required="required"></div>
    <div><label class="lab required" for="form_engineCapacity">Pojemność silnika(cm^3)</label><input type="text" id="form_engineCapacity" name="form[engineCapacity]" required="required"></div>
    <div><label class="lab required">Data pierwszej rejestracji</label>
      <div id="form_firstRegistration">
        <select id="form_firstRegistration_year" name="form[firstRegistration][year]">
          <option value="2013">2013</option>
          <option value="2014">2014</option>
          <option value="2015">2015</option>
          <option value="2016">2016</option>
          <option value="2017">2017</option>
          <option value="2018">2018</option>
          <option value="2019">2019</option>
          <option value="2020">2020</option>
          <option value="2021">2021</option>
          <option value="2022">2022</option>
          <option value="2023">2023</option>
        </select>
        <select id="form_firstRegistration_month" name="form[firstRegistration][month]">
          <option value="1">Jan</option>
          <option value="2">Feb</option>
          <option value="3">Mar</option>
          <option value="4">Apr</option>
          <option value="5">May</option>
          <option value="6">Jun</option>
          <option value="7">Jul</option>
          <option value="8">Aug</option>
          <option value="9">Sep</option>
          <option value="10">Oct</option>
          <option value="11">Nov</option>
          <option value="12">Dec</option>
        </select>
        <select id="form_firstRegistration_day" name="form[firstRegistration][day]">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
          <option value="13">13</option>
          <option value="14">14</option>
          <option value="15">15</option>
          <option value="16">16</option>
          <option value="17">17</option>
          <option value="18">18</option>
          <option value="19">19</option>
          <option value="20">20</option>
          <option value="21">21</option>
          <option value="22">22</option>
          <option value="23">23</option>
          <option value="24">24</option>
          <option value="25">25</option>
          <option value="26">26</option>
          <option value="27">27</option>
          <option value="28">28</option>
          <option value="29">29</option>
          <option value="30">30</option>
          <option value="31">31</option>
        </select>
      </div>
    </div>
    <div><label class="lab required" for="form_meterStatus">Stan licznika</label><input type="text" id="form_meterStatus" name="form[meterStatus]" required="required"></div>
    <div><label class="lab required" for="form_vinNumber">Numer VIN(nadwozia)</label><input type="text" id="form_vinNumber" name="form[vinNumber]" required="required"></div>
    <div><label class="lab required" for="form_isForeign">Sprowadzony z zagranicy:</label><input type="checkbox" id="form_isForeign" name="form[isForeign]" required="required" value="1"></div>
  </div>

  <div class="" id="formCarOwner">
    <div><label class="lab required" for="form_name">Imie i nazwisko</label><input type="text" id="form_name" name="form[name]" required="required"></div>
    <div><label class="lab required" for="form_pesel">PESEL</label><input type="number" id="form_pesel" name="form[pesel]" required="required"></div>
    <div><label class="lab required" for="form_adress">Adres miejsca zarejestrowania pojazdu</label><input type="text" id="form_adress" name="form[adress]" required="required"></div>
    <div><label class="lab required" for="form_postalCode">Kod pocztowy</label><input type="text" id="form_postalCode" name="form[postalCode]" required="required"></div>
    <div><label class="lab required">Data uzyskania prawa jazdy</label>
      <div id="form_drivingLicence">
        <select id="form_drivingLicence_year" name="form[drivingLicence][year]">
          <option value="2013">2013</option>
          <option value="2014">2014</option>
          <option value="2015">2015</option>
          <option value="2016">2016</option>
          <option value="2017">2017</option>
          <option value="2018">2018</option>
          <option value="2019">2019</option>
          <option value="2020">2020</option>
          <option value="2021">2021</option>
          <option value="2022">2022</option>
          <option value="2023">2023</option>
        </select>
        <select id="form_drivingLicence_month" name="form[drivingLicence][month]">
          <option value="1">Jan</option>
          <option value="2">Feb</option>
          <option value="3">Mar</option>
          <option value="4">Apr</option>
          <option value="5">May</option>
          <option value="6">Jun</option>
          <option value="7">Jul</option>
          <option value="8">Aug</option>
          <option value="9">Sep</option>
          <option value="10">Oct</option>
          <option value="11">Nov</option>
          <option value="12">Dec</option>
        </select>
        <select id="form_drivingLicence_day" name="form[drivingLicence][day]">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
          <option value="13">13</option>
          <option value="14">14</option>
          <option value="15">15</option>
          <option value="16">16</option>
          <option value="17">17</option>
          <option value="18">18</option>
          <option value="19">19</option>
          <option value="20">20</option>
          <option value="21">21</option>
          <option value="22">22</option>
          <option value="23">23</option>
          <option value="24">24</option>
          <option value="25">25</option>
          <option value="26">26</option>
          <option value="27">27</option>
          <option value="28">28</option>
          <option value="29">29</option>
          <option value="30">30</option>
          <option value="31">31</option>
        </select>
      </div>
    </div>
    <hr>
  </div>

  <input type="button" id="addFields" value="+">
  <input type="button" id="removeFields" value="-" style="display: none;">
  <input type="submit">
</form>