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

时间:2014-02-03 19:11:19

标签: php ajax forms checkbox

我有一张表,其中最后一个单元格是一个位值。插入新数据时,该位自动设置为1.我使用PHP以<table>形式显示表的内容,其中最后一个单元格包含一个复选框。我没有在<form></form>标记中包含这些复选框,它们只是<input ... />name="stat[]."我使用了一个数组作为名称,以便PHP知道$_POST['stat']将是一个包含所有输入的数组。

可以检查并提交一个或多个复选框,以将位值更新为0.

问题:

我是否必须使用<form>标签? AJAX无法正常工作。

可以为<button>元素分配方法和操作吗?

HTML按钮。请注意,这里没有表格。

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

jQuery和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;
                    }
                }
            });
        });
    }
});

用于呈现HTML列表的PHP

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

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

1 个答案:

答案 0 :(得分:0)

我没有检查所有源代码,但绝对可以使用AJAX将一些数据发送到服务器而无需<form>标记。使用表单使得一次接收所有“表单值”变得容易得多。