Post a form with only some fields

Question

In my HTML/PHP application I have a simple form:

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

Then, in another part of the page I have a standard button:

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

When the user presses this button, the desired behavior is to mimic the same behavior of posting the form using the submit button, but:

1. include specific fields only (let's say vehicle2)
2. set a given value for them

Example, for simplicity I'm using a single field:

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

so I can call it as:

updateForm("vehicle2", "Plane");

Here my PHP code of the page:

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

But it returns an error about the json content:

parsererror SyntaxError: JSON.parse: unexpected character at line 3 column 1 of the JSON data

Is my approach wrong?

Answer 1

Here is the correct code you sended (mostly the ajax request) :

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

EDIT:

Or you can simply add a form :

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