Jquery - Internet Explorer submitting form twice

Question

I have the following code which I use to submit forms with links (instead of buttons). This is so that we can do some CSS hover stuff with them.

$('a.css_submit').click(submit_form);
$('a.inactive_submit').click(submit_form);

function submit_form(event) {
  if ($(this).parents('form:first').length > 0 && !$(this).hasClass('inactive_submit'))   {
        $(this).toggleClass("css_submit inactive_submit");
    $(this).parents('form:first').submit();
    return false;
  } else {
    return true;
  }
}

The issue is that Internet Explorer occasionally submits the form twice. I haven't been able to replicate the problem myself, but I can verify it in my production server logs. This problem persists in IE6 - IE9. All other browsers work fine. I've seen some posts that say to return false from the link, but I'm doing that.

Any help is appreciated.

maybe users are clicking submit twice really fast. Try disabling the link after the first click. — Ilia Choly, Sep 20 '11 at 14:51
Does it do the same thing if you use event.preventDefault() as the first line of submit_form? (instead of return false;) — Mike Robinson, Sep 20 '11 at 15:12
+1 @ilia this is often the case. The general population is used to double-clicking Windows icons, so they tend to double-click _everything_. I wrote an online payment system some years ago and we disabled the submit button onclick (in addition to server-side validation) in order to deter double submissions. — Adrian J. Moreno, Sep 20 '11 at 15:19
I probably should add something to disable the link after the first click, but the problem is *only* in IE. Theoretically, any browser could be clicking twice - but the other browsers aren't producing duplicate submissions. — Kevin Whitaker, Sep 20 '11 at 15:28
I don't find it unlikely that people who double-click everything are also people who use IE. — JJJ, Sep 20 '11 at 15:58

score 2 · Answer 1 · answered Sep 24 '14 at 15:42

2

When you submit the form yourself you need to also cancel event's default processing.

The jquery way is event.preventDefault():

$(this).parents('form:first').submit();
event.preventDefault();

Returning true / false has no effect in jquery.

answered Sep 24 '14 at 15:42

rustyx

80,671
25
200
267

score 0 · Answer 2 · answered Jan 16 '19 at 14:10

0

For IE, you can use following code :

event.returnValue = false;

we can check if preventDefault exists to avoid error :

event.preventDefault ? event.preventDefault() : (event.returnValue = false);

answered Jan 16 '19 at 14:10

DependencyHell

1,027
15
22

score 0 · Answer 3 · answered Jan 16 '19 at 14:13

0

For IE, I found this :

event.returnValue = false;

First check if event.preventDefault exists to prevent an eventual error :

event.preventDefault ? event.preventDefault() : (event.returnValue = false);

answered Jan 16 '19 at 14:13

DependencyHell

1,027
15
22

score 0 · Accepted Answer · answered Sep 20 '11 at 15:13

You could add some extra validation to make sure it doesn't get clicked twice:

var formSubmitted = false;

function submit_form(event) {
  if(formSubmitted  == true) { alert('Form already submitted.'); return false; } // determine if form is already submitted
  if ($(this).parents('form:first').length > 0 && !$(this).hasClass('inactive_submit'))   {
        $(this).toggleClass("css_submit inactive_submit");
    $(this).parents('form:first').submit();
    return false;
  } else {
    formSubmitted  = true;
    $('a.css_submit').attr('disabled', true); // disable form submit button
    $('a.css_submit').val('Processing...'); // set form submit button text to say processing
    return true;
  }
}

Jquery - Internet Explorer submitting form twice

4 Answers4