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.

Answer 1

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