Question

The script is simple, but cant work. I don’t know what’s wrong

<script type="text/javascript"> 
$("#save-form").submit(function() {
    $("#wait").show();
    return false;
});
</script>
<div class="myform">
<form id="save-form" method="post" action="/save/">{% csrf_token %}
    {{ form.as_p }}
    <button type="submit">submit</button>
    <a href="/.">{% trans "cancle" %}</a>
    <div id="wait"><img src="{{ STATIC_URL}}webimages/ajax-loader.gif"></div>
</form>
</div>

Because the form needed process 3-4 seconds, I want to add a loading image while the form be submitted. When click submit, I can see lower right corner shows waiting for x.x.x.x …, and redirect to another page lately.

Thanks!!

Answer 1

Try:

$(function() {
  $('#save-form').submit(function(e) {
   $("#wait").show();
    e.preventDefault();
    var $form = $(this).unbind('submit');
    setTimeout(function(){
      $form.submit();
    }, 100);
  });
});

Hope it helps