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

Question

我有一张表格。我正在通过ajax处理表单

下面的php文件是通过ajax调用的，它会验证数据。如果有错误，则显示它们。如果没有数据插入数据库。成功结果也会显示

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

一切都按照我的预期运作，但我希望进行改进。我只有在显示成功结果时才需要清除表单。

如果有错误，我不想重置表单。

我可以检查输出字符串是否等于整个成功消息，如果是，则重置表单，但我正在寻找一些不依赖于输出字符串的解决方案。

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

从你的php中返回一个JSON ......

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

在你的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");
        }

    }                  

});

Answer 2

$("#create-form").reset();

或者没有jQuery：

document.getElementById("create-form").reset();

这会起作用!!

Refer This

Answer 3

腓：

$response['hasError'] = FALSE; // default
$response['msgError'] = ''

if (!empty($errors)) {
  $response['hasError'] = TRUE ;
  $response['msgError'] .= '<p>some error</p>';
}

echo json_encode($response);

AJAX：

success: function (data) {
    if ( ! data.hasError ) {  
            // no error
        }
    else { 
        // have an error
        }
}