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

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>

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

Adding new fields to form, name property stays the same

html

javascript

loops

clone

rename

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

Adding new fields to form, name property stays the same

html

javascript

loops

clone

rename

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