Search code examples
javascripthtmlloopsclonerename

Adding new fields to form, name property stays the same

I'm trying to make a function to add another owner of the car. For this, I need two functions, one for additional fields and the second one to remove this fields. My form consists of two fieldsets, one for the car, and another for the car owner. I need to clone and insert the div with id="formCarOwner" but also I have to change name property. My solution to clone node of that div and add a number to count forms doesn't work, because it only adding new fields and don't change name property.

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>

Solution

  • No need for two loops, you could loop through the new form copy fields using foreach like :

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

    Though you just can't append a number to your name when you're using arrays. A method would be to use a RegEx and substitute in the current index:

    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>