Update form to work when implementing Ajax

Question

This is the Ajax I want to implement. When the form is submitted, it displays a GIF to show that it is loading, and then depending on the result, an alert appears with a message written by json_encode, and some.

$("#form").submit(function(e) {
    e.preventDefault();

    $("#loading").fadeIn();

    $.ajax({
        type: "POST",
        url: "Operations.php",
        data: $("#form").serialize(),
        dataType: "json",
        success: function(data) {
            $("#loading").hide();
            showAlert("result-success", data.msg);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            $("#loading").hide();
            showAlert("result-error", "Ocorreu um erro ao continuar");
        }
    });
});

Below, the file Operations.php receives for POST the class name and id through two hidden, performs an operation depending on the form and finally sends JSON a result and a message, which will be displayed by the alert created by Ajax

<?php

$class = filter_input(INPUT_POST, "class");
$id = filter_input(INPUT_POST, "id");

@require_once "../../php/Connection.php";
@require_once "../../php/ServiceDatabase.php";
@require_once "../../php/" . $class . ".php";

$Operation = new ServiceDatabase($connection, new $class);

switch ($_REQUEST["submit"]) {
    case "insert":
        $Operation->setPostVariables();

        if ($Operation->insert()) {
            $res = "success";
            $msg = "Dados inseridos com sucesso";
        }

        break;
    case "update":
        $Operation->setPostVariables();

        if ($Operation->update($id)) {
            $res = "success";
            $msg = "Dados atualizados com sucesso";
        }

        break;
    case "delete":
        if ($Operation->delete($id)) {
            $res = "success";
            $msg = "Dados apagados com sucesso";
        }

        break;
}

echo json_encode(array(
    "res" => $res,
    "msg" => $msg
));

Finally, the form. When submitted, it sends the values assigned to hidden, and also the value of button, that will cause an action to be executed.

<?php
session_start();

$class = ucfirst(filter_input(INPUT_GET, "t"));
$id = filter_input(INPUT_GET, "i");

require_once "../../php/" . $class . ".php";

$Table = new ServiceDatabase($connection, new $class);
?>

<form id="form" class="center-block" action="Operations.php" method="post">
    <h3>Alterar - <small><?php echo $class ?></small></h3>

    <input type="hidden" value="<?php echo $class ?>" name="class"/>
    <input type="hidden" value="<?php echo $id ?>" name="id"/>

    <?php echo $Table->generateAdminTables($id); ?>

    <button type="submit" name="submit" value="update" class="btn btn-primary btn-update">Atualizar</button>
    <button type="submit" name="submit" value="delete" class="btn btn-danger btn-delete fright">Apagar</button>
</form>

The Problem

Ajax executes and displays the alert when falling into the success, but does not display any message. It undefined, and furthermore, no operation of the second file is performed, despite showing success. If I simply comment on Ajax, everything works normally.

Issue #1

Upon request, the return of data is Object { res: null, msg: null }. Another detail I forgot to comment on is that while removing Ajax and clicking on the button to update the data at the time it redirects to the file Operations.php to perform some operation, you can see printed on the screen the information of the json_encode.

Answer 1

It seems that $_REQUEST does not work with Ajax. What a surprise.

My solution is: I created a new hidden within the forms you receive via jQuery value of button clicked:

btnValue = "";
$("#form button").click(function() {
    btnValue = $(this).attr("value");
});

Just before the $.ajax i attribute to hidden the value of button

$(this).find("#action").attr("value", btnValue);

In the Operations.php, a new $_POST is received

$action = filter_input(INPUT_POST, "action");

And on the block switch, I just checked the $action

switch ($action) {
    case "insert": ...
    case "update": ...
    case "delete": ...
}

Worked perfectly.