使用没有表单的复选框使用AJAX和PHP更新数据库

Question

I have a table in which the last cell is a bit value. When new data is inserted, the bit is automatically set to 1. I used PHP to display the contents of the table, in <table> form, wherein the last cell contains a checkbox. I didn't surround these checkboxes in <form></form> tags, they're just <input ... /> with name="stat[]." I used an array for the name so that PHP knows that $_POST['stat'] will be an array containing all the inputs.

One or more checkboxes can be checked and submitted to update the bit value to 0.

Questions:

Do I have to use <form> tags for this? The AJAX isn't working.

Can the <button> element be assigned a method and action?

HTML Button. Notice there is no form here.

<input type="submit" id="updateList" type="button" method="post" action="classes/requests/updateList.php" value="update list" />

jQuery and AJAX

$('input#updateList').on('click', function (e) {
    e.preventDefault();
    var open = 'yes';
    if ($('.update:checked').length <= 0) {
        $('.fade_bg').fadeIn(200);
        $('#updateStat').slideDown(600);
        $('span#stat2').fadeIn(400).text('You must make a selection');
        $('a#closeBox2').show();
        return false;
    }
    else {
        $('.update').each(function (index) {
            var chckd = $('#chck' + index).val();
            open = 'no';
            $.ajax ({
                type: 'post',
                url: 'classes/requests/updateList.php',
                data: {
                    stat: chckd
                },
                success: function(data) {
                    if (data === 'updated') {
                        alert(data);
               //       $('.fade_bg').fadeIn(200);
                        // $('#reqStat').slideDown(600);
                        // $('span#stat').fadeIn(400).text('Thank you. Your request has been submitted.');
                        // $('a#successClose').show();
                    }
                    else {
                        $('span#stat').fadeIn(400).text('There was an error in submitting your request');
                        $('a#closeBox').show();
                        return false;
                    }
                }
            });
        });
    }
});

PHP for rendering the HTML list

include('../dbconnect.php');
$closed = 'no';
$pdo = new PDO("mysql:host=$db_host;dbname=$db_name;", $db_user, $db_password);
$stmt = $pdo->prepare("SELECT RequestID, DateAdded, Graphic1Desc, Graphic2Desc, Graphic3Desc, ColorChart, Hex1, Hex2, Hex3, Hex4, Hex5, Hex6, Hex7, Hex8 FROM GraphicsRequest WHERE fulfilled = :done AND RequestID > 0");
print '<table id="pendingReqs">';
print '<tr id="headers">
            <td>Date</td>
            <td>Gr. 1</td>
            <td>Gr. 2</td>
            <td>Gr. 3</td>
            <td>Colors?</td>
            <td>HEX Vals 1-8</td>
            <td>Done</td>
            </tr>';
$stmt->bindParam(':done', $closed);
for ($r = 0; $r <= $stmt->rowCount(); $r++) {
    $stmt->execute();
    $row = $stmt->fetchAll(PDO::FETCH_ASSOC);
    $id = $row[$r]['RequestID'];
    $date = $row[$r]['DateAdded'];
    $d1 = $row[$r]['Graphic1Desc'];
    $d2 = $row[$r]['Graphic2Desc'];
    $d3 = $row[$r]['Graphic3Desc'];
    $chart = $row[$r]['ColorChart'];
    $h1 = $row[$r]['Hex1'];
    $h2 = $row[$r]['Hex2'];
    $h3 = $row[$r]['Hex3'];
    $h4 = $row[$r]['Hex4'];
    $h5 = $row[$r]['Hex5'];
    $h6 = $row[$r]['Hex6'];
    $h7 = $row[$r]['Hex7'];
    $h8 = $row[$r]['Hex8'];
    print '<tr>
                <td>' . $date . '</td>
                <td class="desc">' . $d1 . '</td>
                <td class="desc">' . $d2 . '</td>
                <td class="desc">' . $d3 . '</td>
                <td>' . $chart . '</td>
                <td>'
                 . $h1 . ', '
                 . $h2 . ',<br />'
                 . $h3 . ', '
                 . $h4 . ',<br />'
                 . $h5 . ', '
                 . $h6 . ',<br />'
                 . $h7 . ', '
                 . $h8 . '<br /></td>
                <td><input type="checkbox" class="update" name="stat[]" id="chk' . $id . '"/></td></tr>';
}
print '</table>';
print $id;

PHP for updating the list

function updateStatus() {
    include('../../../dbconnect.php');
    $updated = false;
    $open = 'yes';
    $id = 0;
    try {
        $pdo = new PDO("mysql:host=$db_host;dbname=$db_name;", $db_user, $db_password);
        $stat = $pdo->prepare('SELECT RequestID FROM GraphicsRequest WHERE fulfilled = :open');
        $stat->bindParam(':open', $open);
        $_POST['stat'] = array();
        for ($r = 0; $r <= $stat->rowCount(); $r++) {
            $stat->execute();
            $row = $stat->fetchAll(PDO::FETCH_ASSOC);
            $id = $_POST['stat'][$row[$r]['RequestID']];
            if (ISSET($_POST['stat[' . $id . ']'])) {
                $open = 'no';
                $stmt = $pdo->prepare('UPDATE GraphicsRequest SET fulfilled = :open');
                $stmt->bindParam(':open', $open);
                $stmt->execute();
                $pdo = null;
                if ($stmt->rowCount() == 0)
                    echo('rowCount = 0');
                else
                    $updated = true;
                return $updated;
            }
        }
    }
    catch (PDOException $err){
        echo $e->getMessage();
        return $updated;
    }
}

Answer 1

I haven't checked all of your source code, but it is absolutely possible to use AJAX to send some data to the server without the need of <form> tag. Using a form makes it only a lot easier to receive all "form values" at once.