CODEWITHSUNDEEP
javascriptjqueryfirefoxtwitter-bootstrap
Allen
Allen

Reputation: 3771

Firefox and Jquery/Javascript form submission

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!

Upvotes: 0

Views: 2855

Answers (5)

bobince
bobince

Reputation: 536409

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.

Upvotes: 2

Adil Shaikh
Adil Shaikh

Reputation: 44740

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

Upvotes: 0

d_inevitable
d_inevitable

Reputation: 4451

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

Upvotes: 3

Ram
Ram

Reputation: 144689

try this:

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

Upvotes: 1

Munter
Munter

Reputation: 1089

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

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();
}

Upvotes: 1

Related Questions