Submit Form-data after delay, on hitting a submit-button?

Question

I am nearly finished my website, but my last problem is, I want to include a Loading.gif on the Follow-Button after hitting the submit-button 'Follow'. For this I need to submit the form-data after a delay. For showing the loading.gif on hitting submit, I dont need help, just for the delay.

I tried different codes but they didnt work. Here are all the codes:

My Form-Tag with submit-button:

<form id=followForm action="" method="POST"><input type="submit" name="follow" class="btn_id9 shadow rounded-min ptr" value="Follow User" style="width:100%" /></form>

And here the code-sample, which didnt work:

    function formdelay(followform) { 
      $(function() {
        setTimeout(function() { $('#followForm').submit(); }, 2000);
      });
    }

I hope you guys can help me, thanks!

Answer 1

What you need to do is something like this:

$("#followForm input").click(function(e) {
    e.preventDefault();
    setTimeout(function() { $("#followForm").submit(); }, 2000);
});

The key is e.preventDefault() . This method will stop the default behavior of clicking on the submit button (which is submitting on the form). You can then do whatever you need to do and then submit the form manually which is what $("#followForm").submit(); does.

Demo: http://jsfiddle.net/DMcCr/2/

Answer 2

This is an interesting problem. The first thought that I had was to do something like this:

http://jsfiddle.net/V9UpA/

$('#followForm').on('submit', function (event, force) {
    if (!force) {
        var $this = $(this);
        event.preventDefault();
        setTimeout(function () {
            $this.trigger('submit', true);
        }, 2000);
    }
});

Basically, you want to use event.preventDefault() on the initial submit event, followed by a timeout. After that timeout has completed, you re-trigger the event, but pass the force argument so that we want to allow the submit this time around.