Question

I have a page which submits a form on page load and redirects the user to another site. The response from the other end can be a bit slow, so I created this page with a fake loading progress indicator to reassure users. For further reassurance I wanted to add a countdown message saying "You should be redirected to X in Y seconds".

I used this jQuery example, which updates an element with id "countdown" with the current number.

{$(function(){
  var count = 7;
  countdown = setInterval(function(){
    $("#countdown").html(count);
    if (count == 0) {
        clearInterval(countdown);
        $('#countdown_container').html("If you seem to be stuck <a href='javascript:the_form.submit();'>click here</a> to try again.");
    }
    count--;
  }, 1000);
});}

I expected that the redirect would happen before the countdown reached 0.
Unfortunately I’ve found that the script actually stops submission of the form until it’s finished running.. Doh! Can anyone suggest any way around this?

---

A bit later:

Just to clarify after Praveen’s question, I have a normal form on the same page with method post and various hidden inputs containing data to be posted on to another site. In the body tag of my page I have an onload statement submitting this form, like onLoad="document.forms['the_form'].submit()". (I realise that’s probably better done in a jQuery load event.)

Answer 1

You can always submit using $.get or $.post
Then when the callback is run, you can redirect or do as you like.
Doing it manually like this gives you more control as to what to do with the data returned
and if you would like to redirect to a different page after.

//html    
<input type="text" name="firstname" value="some text" />

//jquery
$.get("mypage.php", { firstname: $("input [name=firstname]").first().val() },function(data){
//redirect, show popup, do as you like since the form has been submitted
//data contains the results that were printed
});