如何在插入数据成功时重置表单？ （阿贾克斯）

Question

I have a form. I am processing the form through ajax

Below php file is called through ajax and it validates data. If there are errors, they are displayed. If not data is inserted into the database. Success result is also displayed

if (!empty($errors)) {
    echo "<div class='alert alert-danger'>"
    foreach($errors as $error) {
        echo "<p>".$error."</p>";
    }
    echo "</div>";

} else {
    //no errors     
    $result = $database - > create("customer", $data);
    if ($result) {
        echo "<div class='alert alert-success'>"
        echo "<p>New customer created successfully</p>";
        echo "</div>";
    }
}

Everything works as I expected, but I want to make an enhancement. I need to clear the form only when success result is displayed.

If there are errors I do not want to reset the form.

I can check whether output string is equal to the whole success message and if yes reset the form, but I am looking for some solution which does not depend on the output string.

$(function () {
    $("#create-form").submit(function (e) {
        e.preventDefault();
        $.ajax({
            method: "POST",
            context: this,
            url: "create_process.php",
            data: $(this).serialize(),
            success: function (data) {
                $("#update").html(data);
                $('#create-form').trigger("reset");
                //How to check whether output data is either
                //an error or a success and call above reset function
            }
        });
    });
});

Answer 1

Return a JSON from your php...

$res['html'] = "";
$res['status'] = "";
if (!empty($errors)) {
    $res['html'] .= "<div class='alert alert-danger'>";
    foreach($errors as $error) {
        $res['html'] .= "<p>".$error."</p>";
    }
    $res['html'] .= "</div>";
    $res['status'] = "error";
} else {
    //no errors     
    $result = $database - > create("customer", $data);
    if ($result) {
        $res['html'] .= "<div class='alert alert-success'>";
        $res['html'] .= "<p>New customer created successfully</p>";
        $res['html'] .= "</div>";
    }
    $res['status'] = "success";
}

echo json_encode($res);

In your jquery:

 $.ajax({
    method:"POST",
    context:this,
    dataType: "json",
    url:"create_process.php",
    data:$(this).serialize(),
    success:function(data){                      
        $("#update").html(data.html);           
        if (data.status == "success") {
            $('#create-form').trigger("reset");
        }

    }                  

});