increment value works but not on appended HTML

Question

I created this query to explicitly give each checkbox an index. However, it seems to only work for the first appended row, which apparently only uses the set value. It never uses the incremented value after 1. The console still gives the right value of the variable though, so I'm confused as to why it happens.

var rowNum = 1;
$(document).ready(function() {
  var html = '<tr> <td><input type="text" name="lName[]" id="lName" ></td> <td><input type="text" name="fName[]" id="fName" ></td> <td><input type="text" name="mName[]" id="mName"></td> <td><input type="text" name="suffixName[]" id="suffixName" ></td> <td> <select name="gender[]" id="gender"> <option value="Male">Male</option> <option value="Female">Female</option> </select> </td> <td><input type="date" name="birthday[]" id="birthday" ></td> <td><input type="text" name="phoneNumber[]" id="phoneNumber" ></td> <td> <select name="civilStatus[]" id="civilStatus"> <option value="Single">Single</option> <option value="Married">Married</option> <option value="Widowed">Widowed</option> </select> </td> <td><input type="checkbox" name="isHeadOfFamily[' + rowNum + ']" id="isHeadOfFamily" value="1"> </td> <td><input type="checkbox" name="isEmployed[' + rowNum + ']" id="isEmployed" value="1"> </td> <td><input type="checkbox" name="isSelfEmployedInBusiness-[' + rowNum + ']" id="isSelfEmployedInBusiness" value="1"> </td> <td><input type="checkbox" name="isSelfEmployedInInformalSector[' + rowNum + ']" id="isSelfEmployedInInformalSector" value="1"> </td> <td><input type="checkbox" name="isSoloParent[' + rowNum + ']" id="isSoloParent" value="1"> </td> <td><input type="checkbox" name="isSeniorCitizen[' + rowNum + ']" id="isSeniorCitizen" value="1"> </td> <td><input type="checkbox" name="isPWD[' + rowNum + ']" id="isPWD" value="1"> </td> <td> <select name="relationToHeadOfFamily[]" id="relationToHeadOfFamily"> <option value="Spouse">Spouse</option> <option value="Child">Child</option> <option value="Sibling">Sibling</option> <option value="Parent">Parent</option> <option value="None">None</option> </select> </td> <td><button type="button" name="addmore" id="addmore">Add More</button></td><td><button type="button" name="remove" id="remove">Remove</button></td> </tr>';

  $(document).on('click', "#addmore", function() {
    $("#table_input-people").append(html);
    rowNum++;
    console.log(rowNum);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
<tbody id="table_input-people"></tbody>
</table>

Move the entire var html line into your click function and it should work. the HTML will not be updated with the value from rowNum at the current location — Carsten Løvbo Andersen, Oct 12 '21 at 06:28
I strongly recommend you clone a row instead of having so much HTML in a variable — mplungjan, Oct 12 '21 at 06:32

score 0 · Answer 1 · answered Oct 12 '21 at 06:43

You HTML is statically created outside the code that increments.

You do NOT need the row number to send to PHP, the [] creates arrays for you

Also IDs need to be unique. You can navigate the rows using closest and name^= (name starts with)

Instead clone

$(document).ready(function() {
  const $row = $("#table_input-people tr").eq(0);
  $("#table_input-people").on("click", ".addmore", function() {
    const $newRow = $row.clone()
    $newRow.find("input").each(function() { this.value = "" })
    $("#table_input-people").append($newRow);
  });
  $("#table_input-people").on("click", ".remove", function() {
    $(this).closest("tr").remove()
  });
});

#table_input-people :first-child .remove { display: none }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
  <tbody id="table_input-people">
    <tr>
      <td><input type="text" name="lName[]"></td>
      <td><input type="text" name="fName[]"></td>
      <td><input type="text" name="mName[]"></td>
      <td><input type="text" name="suffixName[]"></td>
      <td>
        <select name="gender[]" id="gender">
          <option value="Male">Male</option>
          <option value="Female">Female</option>
        </select>
      </td>
      <td><input type="date" name="birthday[]"></td>
      <td><input type="text" name="phoneNumber[]"></td>
      <td>
        <select name="civilStatus[]">
          <option value="Single">Single</option>
          <option value="Married">Married</option>
          <option value="Widowed">Widowed</option>
        </select>
      </td>
      <td><input type="checkbox" name="isHeadOfFamily[]" value="1"> </td>
      <td><input type="checkbox" name="isEmployed[]" value="1"> </td>
      <td><input type="checkbox" name="isSelfEmployedInBusiness-[]"  value="1"> </td>
      <td><input type="checkbox" name="isSelfEmployedInInformalSector[]"  value="1"> </td>
      <td><input type="checkbox" name="isSoloParent[]" value="1"> </td>
      <td><input type="checkbox" name="isSeniorCitizen[]"  value="1"> </td>
      <td><input type="checkbox" name="isPWD[]" value="1"> </td>
      <td>
        <select name="relationToHeadOfFamily[]">
          <option value="Spouse">Spouse</option>
          <option value="Child">Child</option>
          <option value="Sibling">Sibling</option>
          <option value="Parent">Parent</option>
          <option value="None">None</option>
        </select>
      </td>
      <td><button type="button" name="addmore" class="addmore">Add More</button></td>
      <td><button type="button" name="remove" class="remove">Remove</button></td>
    </tr>
  </tbody>
</table>

my problem was on the checkboxes, which will not send any data to PHP if they are unticked. therefore checkboxes with no tick get no array index. i had to catch the unticked boxes for their values so I looked on javascript/jquery to manually give each row an index so the data will not get mis-indexed. — inNeedOfHelp, Oct 12 '21 at 06:47
You just need to handle that on the server. You ALWAYS need to double check the data, since anyone can edit the form and spam you with whatever they decide the form should contain — mplungjan, Oct 12 '21 at 06:53
You can have a hidden field like employment[1] value="1", update that and remove the value if any of the others were checked - see the dupe I posted - there are many more — mplungjan, Oct 12 '21 at 06:55

increment value works but not on appended HTML

1 Answers1