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
}
});
});
});
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");
}
}
});
$("#create-form").reset();
Or without jQuery:
document.getElementById("create-form").reset();
This will work!!
Php:
$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
}
}