0

I have multiple checkbox to get all favourites fruits.

HTML

List Favourite<br>

    <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>

The steps is:
1. There are 2 users, John and Mark
2. Then We tick the favourites fruits for each
3. After that click the submit button
4. Save it to database

Now the question is: How to get all the value of checkbox checked by each users base on his User ID(on input hidden) by btnSubmit click and store it to database?

Example will save on table
Table

uid    | favourites_fruits
U0001  | Apple, Mangoes
U0002  | Banana, Apple

JS

$('#btnSubmit').on('click', function()
{

});

Demo Fiddle

HiDayurie Dave
  • 1,791
  • 2
  • 17
  • 45

2 Answers2

0

First you need to extract the values from the associated elements, and decide how you're going to store them. In this example, I've created two separate arrays: johns_favourite_fruits and marks_favourite_fruits. You check against the .checked attribute, and if it's true, you add the associated value to the array. This array then gets posted to the server in a JSON format.

This isn't necessarily the most elegant way of going about this, but it gets the job done:

$("#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("update.php", // Replace this with your PHP script
    {
        johns_favourite_fruits: johns_favourite_fruits,
        marks_favourite_fruits: marks_favourite_fruits
    },
    function(data, status) {
        alert("Data: " + data + "\nStatus: " + status);
    }
  );
});

Once you have submitted the values, you can extract them from $_POST, and insert them into the database from there:

$_POST['johns_favourite_fruits'];
$_POST['marks_favourite_fruits'];

How you insert them depends on whether you're using MySQL, MySQLi, or PDO. Naturally, you should definitely use parameterised queries!

I've created a JSFiddle showcasing the JavaScript here.

Hope this helps!

Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
  • Hi, just now tried your code but got error on alert, Data:
    : Array to string conversion in C:\xampp\htdocs\siixwebapps\update.php on line 2
     – HiDayurie Dave Mar 03 '17 at 03:22
  • and how about if the checkbox is more than 2 users? So I need to make new var for new name? – HiDayurie Dave Mar 03 '17 at 03:23
  • Well you'd either need to do that, or create a loop that goes over each TD. To be honest, the HTML itself should **really** be re-written so that it's a proper form. You don't typically submit complicated posts like this with AJAX. – Obsidian Age Mar 03 '17 at 03:58
-1

I have made slight modification in HTML mockup to take advantage of selector.

$(function() {
  $('#btnSubmit').click(function() {
    $('#result').html('');
    $('.users').each(function() {
      var uid = $(this).attr('id');
      $('#result').append('<h3>' + $(this).parent().text() + '\'s favourite fruit(s)</h3>');
      $('input[data-uid=' + uid + ']:checked').each(function() {
        $('#result').append('<div>'+ $(this).val() + '</div>');
      });
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
List Favourite<br>

<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" class="users" id="U0001" /></td>
        <td align="center">
          <input type="checkbox" data-uid="U0001" name="fruits[]" value="Banana" />
        </td>
        <td align="center">
          <input type="checkbox" data-uid="U0001" name="fruits[]" value="Apple" />
        </td>
        <td align="center">
          <input type="checkbox" data-uid="U0001" name="fruits[]" value="Mangoes" />
        </td>

        <tr>

          <td>Mark<input type="hidden" id="U0002" class="users" /></td>
          <td align="center">
            <input type="checkbox" name="fruits[]" value="Banana" data-uid="U0002" />
          </td>
          <td align="center">
            <input type="checkbox" name="fruits[]" value="Apple" data-uid="U0002" />
          </td>
          <td align="center">
            <input type="checkbox" name="fruits[]" value="Mangoes" data-uid="U0002" />
          </td>

          <tr>

            <td colspan=4>
              <input type="button" value="Submit" id="btnSubmit" />
            </td>
</table>
<div id="result"></div>
jagdish.narkar
  • 317
  • 1
  • 7