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!

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!

• javascript
• jquery
• firefox
• twitter-bootstrap

5 Answers 5

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"/>

Works for me, but removing a button from the document during its click handler seems likely to cause inconsistent behaviour: does the default action of submitting the form apply to the form that owned it at click-time, or at the post-click-event-time the default action fires (no form)?

Avoid this ambiguity - don't destroy the button by replacing it with new markup. Instead, alter it:

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

$('.submitButton').click(function() {
    $(this).text('Loading...');
    $(this).removeClass('submitButton');
    $(this).addClass('disabled');
});

Note that (a) you don't need to call form.submit() because that's the default action for a submit-button anyway; (b) as Munter said, document.namedElement is bad form, (c) as d_inevitable said, hooking form.onsubmit is almost always a better thing to do than button.onclick - though maybe not here if you are specifically only worried about mouse clicks.

Accessing dom elements by name like you do in document.aform is not remended.

Since you already have the button inside the form you should use the buttons .form property.

so something like

button.onclick = function () {
    this.form.submit();
}

try this:

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

Here is a working example : tested on FF http://jsfiddle/JV68U/