Question

I have this jQuery

$(document).ready(function(){
  $('#credit_btn, #checkout_btn').click(function(){
    $("#content_container .notice, #content_container .error").remove();
    $('#loading').show();
  });
});

The HTML

<div id="loading" style="display: none;">
  <img alt="spinner" border="0" src="/assets/spinner.gif">
</div>
<input class="bigbutton" data-disable-with="One Moment, Processing..." id="checkout_btn" name="commit" type="submit" value="Next Step: Checkout">

why is the spinning not showing up it shows up when i do

  $j('#credit_btn, #checkout_btn').click(function(){
    $j("#content_container .notice, #content_container .error").remove();
    $j('#loading').show();
    return false;
  });

what is happening here and is there anything I can do? Thanks in advance

UPDATE

I tested this jquery as well

  $('#credit_btn, #checkout_btn').click(function(e){
    e.preventDefault();
    $("#content_container .notice, #content_container .error").remove();
    $('#loading').show();
    $(this).closest("form").submit();
  });

the spinner doesnt come up again but it shows up when i remove the line $(this).closest("form").submit(); …I am confused…why does the form submit have anything to do why the loader

Answer 1

This happens because your form gets submitted, and so the page is reloaded. (you are seeing the page that the form direct you to)

This is the normal browser behavior. You might want to try submitting your form with AJAX, if you need to remain on the current page..