How to reset form only when data in inserted successfully ? (Ajax)

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

you can return a json with your html and the status returned.. — pecci, Aug 26 '14 at 14:03
i return a json array when I do ajax the first item is "requeststatus" which is true or false, the second item is an error message if required and the 3rd item is any actual html output. so in your case using the same method your success: bit would contain a simple `if (data['requeststatus']!=true) { alert("failure") } else { //success }` — Dave, Aug 26 '14 at 14:06
the preferred way is to return a json response from the server when a post is initiated, there you can work out what you want to do on the `success function` if it is a `error`, `success` or `fail` — tomexsans, Aug 26 '14 at 14:16

pecci · Accepted Answer · 2014-08-26T14:46:31.793

2

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

    }                  

});

edited Aug 26 '14 at 14:46

answered Aug 26 '14 at 14:09

pecci

540
5
17

{ "html": "", "status": "success" } is this php file – gihanmu Aug 26 '14 at 14:12
Yes, instead of returning just the html you do this: { "html": "
...
", "status": "success" } or { "html": "
...
", "status": "error" } Then, when you use the dataType json on jquery you can use this properties like i did in the example... – pecci Aug 26 '14 at 14:13
In my php (success statement) echo { "html":; if($result){ echo "
"; echo "
New customer created successfully
"; echo "
"; } echo "
...
", "status": "success" } ; I did this, but it does not work. Have i done the right thing – gihanmu Aug 26 '14 at 14:18
Form get result now only on success. Thanks, but success and error messages are not displayed now. why is that? – gihanmu Aug 26 '14 at 14:35
@ pecci - You solution is perfect, but you need to amend it a little bit. Add $html .= operator for appending strings. I will make this as the accept answer, but do those changes – gihanmu Aug 26 '14 at 14:39
@gihanmu just changed some things. – pecci Aug 26 '14 at 14:47

score 0 · Answer 2 · edited May 23 '17 at 11:58

0

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

Or without jQuery:

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

This will work!!

Refer This

edited May 23 '17 at 11:58

Community

1
1

answered Aug 26 '14 at 14:04

Raja Sekar

2,062
16
23

What's the difference between the first two. And the first two do not work! `:(` – Praveen Kumar Purushothaman Aug 26 '14 at 14:04
I think you have not read the question properly. I know how to reset the form. But resetting has to get executed only for the success – gihanmu Aug 26 '14 at 14:06

score 0 · Answer 3 · answered Aug 26 '14 at 14:13

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

How to reset form only when data in inserted successfully ? (Ajax)

3 Answers3