发布一个只有一些字段的表格

Question

在我的 HTML/PHP 应用程序中，我有一个简单的表单：

<form method="post">
    <input type="text" id="vehicle1" name="vehicle1" value="Bike">
    <input type="text" id="vehicle2" name="vehicle2" value="Car">
    <input type="text" id="vehicle3" name="vehicle3" value="Boat">

    <button type="submit" name="submitform" class="btn btn-success" value="save">Save</button>
</form>

然后，在页面的另一部分我有一个标准按钮：

<button type="button" class="btn btn-primary">Update</button>

当用户按下此按钮时，所需的行为是模仿使用提交按钮发布表单的相同行为，但是：

1. 仅包含特定字段（比如vehicle2）
2. 为它们设置一个给定的值

例如，为简单起见，我使用单个字段：

function updateForm(id, value)
{
    $.ajax({
        url: "samepage.php",
        type: 'POST',
        dataType: "json",
        data: JSON.stringify({submitform: "save", id: value}),
        cache: false,
        contentType: "application/json",
        success: function (result) {
        },
        error: function (request, status, error) {
            console.error(request, status, error);
        }
    });     
}

所以我可以这样称呼它：

updateForm("vehicle2", "Plane");

这是我页面的 PHP 代码：

<?php
if (isset($_POST['submitform'])) {
    switch ($_POST["submitform"]) {
        case "save":
            foreach ($_POST as $key => $value) {
                if ($key == 'submitform') continue;
                $sql_update = 'UPDATE settings SET value="' . $value . '" WHERE id=' . $key;
                $db->exec($sql_update);
            }
            break;
    }
}
?>

HTML follows...

但它返回一个关于 json 内容的错误：

parsererror SyntaxError：JSON.parse：JSON 数据第 3 行第 1 列出现意外字符

我的方法错了吗？

Answer 1

这是您发送的正确代码（主要是 ajax 请求）：

<?php
if (isset($_POST['submitform'])) {
    switch ($_POST["submitform"]) {
        case "save":
            foreach ($_POST as $key => $value) {
                if ($key == 'submitform') continue;
                $sql_update = 'UPDATE settings SET value="' . $value . '" WHERE id=' . $key;
                $db->exec($sql_update);
            }
            break;
    }
}
?>
<script>
function updateForm(id, value)
{
    $.ajax({
        url: "samepage.php",
        type: 'POST',
        data: {submitform: "save", id: value},
        success: function (result) {
            // reload the page ?
            //location.reload();
        },
        error: function (request, status, error) {
            console.error(request, status, error);
        }
    });
}
</script>
<form method="post">
    <input type="text" id="vehicle1" name="vehicle1" value="Bike">
    <input type="text" id="vehicle2" name="vehicle2" value="Car">
    <input type="text" id="vehicle3" name="vehicle3" value="Boat">
    <button type="submit" name="submitform" class="btn btn-success" value="save">Save</button>
</form>
<button onclick="updateForm('vehicle2', 'Plane');" type="button" class="btn btn-primary">Update</button>

编辑：

或者您可以简单地添加一个表单：

<form method="post">
    <input type="hidden" name="vehicle2" value="Plane">
    <button type="submit" name="submitform" class="btn btn-success" value="save">Update</button>
</form>