JSFiddle - React, Tailwind, and code Playground

by Simon Henshall

HTML

<table border=1>
  <th rowspan=3>Name</th>
  <tr>
    <th colspan=3>Favourite Fruits</th>
    <tr>
      <th>Banana</th>
      <th>Apple</th>
      <th>Mangoes</th>
      <tr>
        <td>John
          <input type="hidden" id="U0001" />
        </td>
        <td align="center">
          <input type="checkbox" name="fruits[]" value="Banana" />
        </td>
        <td align="center">
          <input type="checkbox" name="fruits[]" value="Apple" />
        </td>
        <td align="center">
          <input type="checkbox" name="fruits[]" value="Mangoes" />
        </td>
        <tr>
          <td>Mark
            <input type="hidden" id="U0002" />
          </td>
          <td align="center">
            <input type="checkbox" name="fruits[]" value="Banana" />
          </td>
          <td align="center">
            <input type="checkbox" name="fruits[]" value="Apple" />
          </td>
          <td align="center">
            <input type="checkbox" name="fruits[]" value="Mangoes" />
          </td>
          <tr>
            <td colspan=4>
              <input type="button" value="Submit" id="btnSubmit" />
            </td>
</table>

JavaScript

$("#btnSubmit").click(function() {
  // Collect the results
  var fruitsNodeList = document.getElementsByName("fruits[]");
  var johns_favourite_fruits = [];
  var marks_favourite_fruits = [];
  for (var i = 0; i < fruitsNodeList.length; i++) {
    if (i < 3) {
      if (fruitsNodeList[i].checked) {
        johns_favourite_fruits.push(fruitsNodeList[i].value);
      }
    } else {
      if (fruitsNodeList[i].checked) {
        marks_favourite_fruits.push(fruitsNodeList[i].value);
      }
    }
  }
  
  // Debug
  console.log(johns_favourite_fruits);
  console.log(marks_favourite_fruits);

  // Post the results
  $.post("demo_test_post.asp",
    {
        johns_favourite_fruits: johns_favourite_fruits,
        marks_favourite_fruits: marks_favourite_fruits
    },
    function(data, status) {
        alert("Data: " + data + "\nStatus: " + status);
    }
  );
});