Question

How can I use jQuery ajax to handle checked checkboxes? How do I then send each checked checkbox in the html table, to ajax.php?

This is what I’ve tried so far:

ajax.php

session_start();
if (isset($_POST['id']) && isset($_POST['to']) && isset($_SESSION['user']['id'])) {
    if (is_numeric($_POST['id']) && is_numeric($_POST['to'])) {
        include("mysql_connector.php");
        $user = $_SESSION['user']['id'];
        $sendTo = mysql_real_escape_string(trim($_POST['to']));
        foreach ($_POST['id'] as $id) {
            $id = mysql_real_escape_string(trim($id));
            mysql_query("UPDATE `email` SET status = '$sendTo' WHERE `email_id` = '$id' AND `userid` = '$user'");
        }
    }
}

Javascript:

$(".submit").click(function() {
    var id = $("#id").val();
    var to = $("#bins").val();
    var dataString = 'id=' + id + '&to=' + to;
    $.ajax({
        type: "POST",
        url: "ajax.php",
        data: dataString,
    });
});

html:

<form method="POST">
    <table id="inventory" class="table">
        <thead>
            <tr>
                <th style="text-align: center;"><a href="#" name="checkall" id="checkall" onclick="checkAll(this)" class="checkall">Check All</a></th>
                <th>Time Received</th>
                <th>Email</th>
                <th>Subject</th>
                <th>ID</th>
            </tr>
        </thead>
        <tbody>
            <tr class="email">
                <td style="text-align: center;"><input type="checkbox" name='msg[]' class="id" value="2" /></td>
                <td>1231231</td>
                <td>test</td>
                <td>test</td>
                <td>0</td>
            </tr>
            <tr class="email">

                <td style="text-align: center;"><input type="checkbox" name='msg[]' class="id" value="3" /></td>
                <td>1231231</td>
                <td>test</td>
                <td>test</td>
                <td>1</td>
            </tr>
        </tbody>

    </table>
    </br>
    <select name="bins" class="bins">
        <option value="1">Archive</option>
        <option value="2">Read</option>
        <option value="3">Unread</option>
        <option value="4">Save</option>
    </select>
    <input type="submit" name="move" value="Move" class="submit" style="width:auto;"/>
</form>

Thank you for reading.

Answer 1

First, it is invalid to have multiple dom elements with duplicate ids. If those checkboxes need ids, make them unique. If they don’t need ids, then just drop them completely.

---

To get a list of the values of all checked checkboxes, do:

var checkedVals = [];
$("input[type='checkbox']:checked").each(function() {
    checkedVals.push($(this).val());
});

Or you can fetch different groups of checkboxes by name:

var checkedMsgVals = [];
$("input[name='msg[]']:checked").each(function() {
    checkedMsgVals.push($(this).val());
});

To send these to php, just include them in your data packet when you make the call. To do this you’ll want to send an object over, not a querystring.

var dataObj = {'id': id, 'to': to, 'checkedValues': checkedMsgVals };

$.ajax({
    type: "POST",
    url: "ajax.php",
    data: dataObj,
});