CODEWITHSUNDEEP
javascriptjqueryhtmlforms
rannt
rannt

Reputation: 85

setTimeOut AFTER jQuery form submit

Here is the deal: I have a form, that takes quite some time to submit, because I'm waiting for some third party web services. So what I'm trying to achieve is, that after the submit button is clicked, it gets disabled, is assigned a special class and if it takes more than 5 seconds to submit the form, a notice is displayed.

I've came up with this:

$('#register_index_button').click(function(){
$(this).addClass('bt_button_loader');
$(this).val('Please wait');
$(this).attr('disabled', 'disabled');
$('#register_index_form').submit();

//it takes more than 5 seconds, display notice
setTimeout(function() {
    $('#notice').html('Still waiting ...');
}, 5000);
});

Everything works fine, except the timeout function. I guess after I submit the form with jQuery, everything else after that is ignored?

Thank you for your help!

Upvotes: 0

Views: 7725

Answers (3)

Sgt Oddball
Sgt Oddball

Reputation: 89

As @gaemaf stated. 

$('#register_index_button').click(function(){
   $(this).addClass('bt_button_loader');
   $(this).val('Please wait');
   $(this).attr('disabled', 'disabled');
   $('#register_index_form').submit(
       //Nested inside of the submit to be executed when submit 
       setTimeout(function() {
           $('#notice').html('Still waiting ...');
       }, 5000);
   );
});

Another method would be to gather up all of the fields from the form and submit them using an Ajax submit.

That way you can create the 'Please wait' when the ajax is fired and have a confirmation that the form has been received and is being processed. So something like....

$('#register_index_form').submit(function(){
    var url = "path/to/your/script.php"; 
    // the script where you handle the form input.
    $.ajax({
        type: "POST",
        url: url,
        data: $("#register_index_form").serialize(), 
        // Gets the forms elements and submits them 
        timeout: 10000
        // How long the Ajax will wait before considering the call to have failed
     })
     .done(function( data ) {
          //Do something ...        
     });
     return false; // avoid to execute the actual submit of the form.
});

Upvotes: 0

Steve G.
Steve G.

Reputation: 598

Try attaching an event handler on the form for the "submit" event. Put the timeout event handler function.

(https://developer.mozilla.org/en-US/docs/Web/Events/submit)

$('#register_index_form').on('submit', function(){
     setTimeout(function() {
         $('#notice').html('Still waiting ...');
     }, 5000);

});

Upvotes: 2

Marko
Marko

Reputation: 10992

You should submit after your services get returned, I really don't see any code there that does that, and after you receive your service response, you submit your form. 

$('#register_index_button').click(function(){
$(this).addClass('bt_button_loader');
$(this).val('Please wait');
$(this).attr('disabled', 'disabled');


//it takes more than 5 seconds, display notice
setTimeout(function() {
    $('#notice').html('Still waiting ...');

}, 5000);
});

Place it when the service is retrieved, an ajax call, in complete method.

$('#register_index_form').submit();

Upvotes: 0

Related Questions