jQuery set value of each previous sibling of each ticked checkbox upon submit-CodePudding

I have been searching solutions for this and found that the most effective way is through a hacky workaround like this, but none of them has posted a working way to catching every tick and untick box for a dynamic input row using a lot of checkbox arrays.

I looked around and saw a script way -- let hidden inputs be the POST source and change value according to their adjacent checkbox upon submit. However the jquery doesn't seem to work -- it always submits a value of 0.

$(document).ready(function() {
  $('#frm').submit(function() {
    $('input[type="checkbox"]:checked').prev('.checkboxHandler').val(1);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input type="hidden" class="checkboxHandler" name="isHeadOfFamily[]" value="0">
<td><input type="checkbox"></td>
<input type="hidden" class="checkboxHandler" name="isEmployed[]" value="0">
<td><input type="checkbox"></td>
<! and so on-->

CodePudding user response：

Your code works

I will delete this answer once we have discussed it

I have changed hidden to text and added preventDefault to show it works

$(document).ready(function() {
  $('#frm').on("submit",function(e) {
    e.preventDefault(); //while testing
    $('input[type="checkbox"]:checked').prev('.checkboxHandler').val(1);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form id="frm">
<input type="text" class="checkboxHandler" name="isHeadOfFamily[]" value="0">
<td><input type="checkbox"></td>
<input type="text" class="checkboxHandler" name="isEmployed[]" value="0">
<td><input type="checkbox"></td>
<! and so on-->
<input type="submit"/>
</form>

CodePudding user response：

Consider the following example.

$(function() {
  function getTableData(table) {
    var results = [];
    $("tbody > tr", table).each(function(i, row) {
      results.push({
        id: $(row).data("uid"),
        isHeadofHousehold: $("input", row).eq(0).prop("checked"),
        isEmployed: $("input", row).eq(1).prop("checked")
      });
    });
    return results;
  }
  $('#frm').on("submit", function(e) {
    e.preventDefault();
    var formData = getTableData($("#myTable"));
    console.log(formData);
  });
});

.checkbox {
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form id="frm">
  <table id="myTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Head of Household</th>
        <th>Employed</th>
      </tr>
    </thead>
    <tbody>
      <tr data-uid="1001">
        <td>Homer Simpson</td>
        <td class="checkbox"><input type="checkbox" name="isHeadOfFamily[]" checked></td>
        <td class="checkbox"><input type="checkbox" name="isEmployed[]" checked></td>
      </tr>
      <tr data-uid="1002">
        <td>Marge Simpson</td>
        <td class="checkbox"><input type="checkbox" name="isHeadOfFamily[]"></td>
        <td class="checkbox"><input type="checkbox" name="isEmployed[]"></td>
      </tr>
    </tbody>
  </table>
  <input type="submit" value="Save" />
</form>

You now have:

[
  {
    "id": 1001,
    "isHeadofHousehold": true,
    "isEmployed": true
  },
  {
    "id": 1002,
    "isHeadofHousehold": false,
    "isEmployed": false
  }
]

You can then use AJAX to POST this data back to PHP so the changes can be saved to SQL. As mentioned, you can switch them to 1 and 0 respectively if you choose.