AJAX call after form validation via jquery validation plugin

Question

I've following code

submitHandler: function(form) {
                    $.ajax({
                        url:        GLOBAL_URL + '/searching',
                        data:       $(form).serialize(),
                        type:       'POST'
                    });

                    window.location.href = GLOBAL_URL + '/complete';
                }

What I'm trying to do is when the form gets submitted after validation, I want the user to be redirected to other page while it's searching in the background.

But it doesn't. It waits for the ajax to complete the request and then it redirects.

This ajax works fine out of the jquery validation plugin but now inside. I also tried to set async: true. But no help.

I don't want the user to wait while it's searching. I just want to redirect the user as soon as user submits the form and ajax is fired successfully.

Help me with this. Thanks

What's the point of using ajax() if you still want the page to redirect? Just use a standard form submit. — Sparky
– Sparky, Commented Mar 20, 2015 at 19:10
Please do understand. Standard submission will keep the user waiting until server gives a response which is a long while. That is why the reason I send an email as response to their submission. — Mehulkumar
– Mehulkumar, Commented Mar 20, 2015 at 19:33

Arun P Johny · Accepted Answer · 2015-03-20 10:54:19Z

4

You can use the success callback for the redirection.

$.ajax({
    url: GLOBAL_URL + '/searching',
    data: $(form).serialize(),
    type: 'POST'
}).done(function () {
    window.location.href = GLOBAL_URL + '/complete';
});

answered Mar 20, 2015 at 10:54

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Mehulkumar Over a year ago

I've tried that too sir. I don't want the user to wait while it's searching. I just want to redirect the user as soon as user submits the form and ajax call is fired. Thank you for your reply.

Arun P Johny Over a year ago

in that case you use a timer and redirect in that like setTimeout(function(){ window.location.href = GLOBAL_URL + '/complete'; }, 500)

Mehulkumar Over a year ago

Thanks for quick response. That way it waits for the ajax to complete and extra 500ms to redirect.

Arun P Johny Over a year ago

@m3huL that should be used only if the ajax processing is very long... in such case irrespective of the ajax completion

Mehulkumar Over a year ago

That is the case. Ajax processing takes a while as it calls few apis and does complex database operations. Any solution?

|

Rohan Kumar · Accepted Answer · 2015-03-20 10:55:39Z

0

Try this,

$.ajax({
    url:        GLOBAL_URL + '/searching',
    data:       $(form).serialize(),
    type:       'POST',
    success:     function(response){ // called when you get the response from server
        // you can check the response and redirect your page accordingly
        // for success or error response
        window.location.href = GLOBAL_URL + '/complete';
    }
});

answered Mar 20, 2015 at 10:55

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

1 Comment

Mehulkumar Over a year ago

I don't want user to wait till server sends back the response. It's like fire and forget. Any idea?

Tanmoy · Accepted Answer · 2015-06-06 12:44:04Z

0

$("#submit_fund").click(function(){
    $('#frm_add_fund').ajaxForm({
        dataType:  'json',
        success:   test
    });
});

function test(data) {
  if(data.success == 0 ){

  //show the validation error for particular fields//

  }else if( data.success == 1){
         var url = data.url;
    window.location = url.replace('&&', '&').replace('?&', '?');
  }
 }

edited Jun 6, 2015 at 12:44

answered Mar 20, 2015 at 11:00

Tanmoy

1,0156 silver badges19 bronze badges

2 Comments

Mehulkumar Over a year ago

Could you explain a bit?

Tanmoy Over a year ago

I have use ajax form submit, in the success function , if there is no validation error, then it will redirected.

Sagar Devkota · Accepted Answer · 2015-03-20 14:09:57Z

-1

Remove whole submitHandler block and add click handler separately for button

$("#yousubmitbtnid").click (function() {

    If ($("#yourformid").valid ()){

                    .ajax({
                        url:        GLOBAL_URL + '/searching',
                        data:      $("#yourformid") .serialize(),
                        type:       'POST'
                    });

                    window.location.href = GLOBAL_URL + '/complete';
    }

});

If problem occurs, change input type submit to button Sorry for bad indentation. As I am using mobile for this

answered Mar 20, 2015 at 14:09

Sagar Devkota

1,1928 silver badges13 bronze badges

4 Comments

Sparky Over a year ago

This is the exact opposite of a correct answer. The OP is using the plugin's submitHandler exactly for what it was designed... ajax().

Sagar Devkota Over a year ago

But OP says submitHandler is not allowing ajax async and he told " This ajax works fine out of the jquery validation plugin but now inside. I also tried to set async: true. But no help" means above code does same as submitHandler but outside..and async too

Sparky Over a year ago

Bottom line, to avoid redundancy and conflicts use the plugin's submitHandler for ajax()... that's what it's for. The OP's is clearly confused about ajax() here, as if you simply want to redirect to a new page, you wouldn't use ajax() in the first place.

Sagar Devkota Over a year ago

I think so but his desire is to perform redirect and ajax call in parallel way. This way he will not able to grab the response of ajax but can initiate ajax call in background and redirect same time.

Collectives™ on Stack Overflow

AJAX call after form validation via jquery validation plugin

4 Answers 4

9 Comments

1 Comment

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

9 Comments

1 Comment

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related