Question

I have a problem in firefox, where I’m trying to get a form submission button to display “loading” when a person clicks on it (to prevent multiple submissions of a user clicking it two/three times due to a slow site).

I have this jquery code:

$(document).ready(function(){
     $('.submitButton').click(function() {
        document.aform.submit();
        $('.buttonSpan').html('<button class="btn btn-primary disabled">Loading...</button>');

     });
});

Chrome executes it correctly, but Firefox only changes the HTML in the span surrounding but doesn’t submit the form. Firefox submits when i click the button twice. If I remove the line of the .html() changing, it also submits with no problem.

Here is the form code for reference:

<form name="aform" action="index.php" enctype="multipart/form-data" method="post">
    ...form data
    <span class="buttonSpan">
         <button class="btn btn-primary submitButton" name="submit"/>Submit</button>
    </span>
</form>

Does firefox put precedence on html changes and ignore everything else? Again, this works fine in Chrome, but firefox is really killing me!

Thanks!

Answer 1

In most cases it is better to use the submit event on the form instead of the click event of the submit button. (what if you submit the form by pressing the enter button?)

$(function(){
     $('form[name=aform]').submit(function() {
        $('.buttonSpan', this).html('<button class="btn btn-primary disabled">Loading...</button>');

     });
});

When using this, you will need to fixed the html of your submit button as I have stated below.

Otherwise I suggest finding the form relative to the submit button:

$(function(){
     $('.submitButton').click(function() {
         $(this).closest("form").submit()
        .find('.buttonSpan').html('<button class="btn btn-primary disabled">Loading...</button>');

     });
});

Also the proper way of defining your submit button is like this:

<input type="submit" class="btn btn-primary submitButton" value="Submit" name="submit"/>