submit form does not stop in jquery ajax call

Question

I got following code :

> $.ajax(
>                     {
>                         type: "POST",
>                         async: false,              
>                         url: "CheckIdExist",
>                         data: param,
>                         success: function(result) {
>                             if (result == true){
>                                return false;
>                             }                                 
>                         },
>                         error: function(error) {
>                             alert(error);
>                             return false;
>                         }
>                     });

if ajax return value is true, form needs to stop submit.

but it does not stopping submit form.

any help please.

Answer 1

In this case you need to perform a synchronous http request, i.e. you have to set the async option to false.
In your version the httpxmlrequest is asynchronous. It might be finished long after your onsubmit handler has returned and the onsuccess callback is invoked out of context of the onsubmit handler.
The "return false" will be the return value of the anonymous function function(result) {... } and not the return value of the onsubmit handler.

Answer 2

You need to do a callback.

This entry in the FAQ helped me a lot when I had this exact problem.

getUrlStatus('getStatus.php', function(status) {
    alert(status);
});

function getUrlStatus(url, callback) {
    $.ajax({
        url: url,
        complete: function(xhr) {
            callback(xhr.status);
        }
    });
}

The reason for that is that you can not return in an AJAX function.

The code above does not work as desired due to the nature of asynchronous programming. The provided success handler is not invoked immediately, but rather at some time in the future when the response is received from the server. So when we use the 'status' variable immediately after the $.ajax call, its value is still undefined.

Answer 3

You can't put this code in a function or in the onsubmit of a form, the success function returns it's result returning to the jQuery ajax context, NOT the form submit context.

Answer 4

I assume you have something like:

form.submit(function(event) {
    $.ajax(...);
});

You want to return false (or call event.preventDefault()) in the event handling function itself, and not in the AJAX call, such as:

form.submit(function(event) {
    $.ajax(...);
    event.preventDefault();
});

Answer 5

I had this problem also but solved it by changing the input type="submit" to type="button" and then just do your ajax request

   $("input#submitbutton")
    {
                          $.ajax(
                        {                         type: "POST",
                             async: false,              
                            url: "CheckIdExist",
                             data: param,
                            success: function(result) {
                                 if (result == true){
                                    //TODO: do you magic
                                 }                      
                                 else
                                  $("form").submit();           
                             },
                             error: function(error) {
                                alert(error);
                                return false;
                            }
                        });
    });

Answer 6

A slight variation of this question is: I want to use jquery and ajax to present an error message to a user, but then to do normal processing if there is no error.

Suppose method "check" returns a response that is empty if there is no error, and has the error(s) in it if there are any.

Then you can do something like this in your ready function:

$("#theform").submit(function() {
    var data = { ... }
    $.get('/check', data,
        function(resp) {
            if (resp.length > 0) {
                $("#error").html(resp);
            } else {
                $("#theform").unbind('submit');
                $("#theform").submit();
            }
    });
    event.preventDefault();
});

So, how does it work? When the outer submit function is triggered, it builds the data needed for the AJAX call (here the higher level function get). The call is scheduled, and the main thread of operation immediately continues, but the submit is unconditionally stopped, so nothing apparent happens.

Some time passes, and the AJAX call returns the result of the request. If non-empty, the result is shown to the user.

If the response is empty, however, the submit function is unbound. This prevents the ssytem from making an extra call through the outer submit function. The inner submit function is called. This triggers an actual form submission to the form's target, and life goes on as expected.