Prevent IE form submit on jQuery delegate 'submit' action

Question

I am attempting to use jQuery's .delegate() function to catch a submit button press and prevent the page from being reloaded.

It works fine in every browser I have tried, but Internet Explorer!

Let me explain in code, I have this HTML which is dynamically generated by JS:

<form id='submit-form'>
  <input type='text' id='blah' />
  <input type='submit' id='blahbutton' />
</form>

My Javascript looks like this:

$("body").delegate("#submit-form", "submit", function(event)
{
  // to logic here
  return false;
});

When typing in the text box and using the 'Enter' keyboard button, it performs the JS fine and the page stays as-is. But when the Submit button is clicked with the mouse, it reloads the page and submits the form.

How can I make it so clicking the button does the same as pressing enter on the input on Internet Explorer?

Answer 1

Try this,

<form id='submit-form' onSubmit='return false;'>

Answer 2

Long shot here, but do you have anything else on that page with either an id or name attribute of submit-form or blahbutton? Or a global variable (e.g., window property)? Because IE has namespace issues (it conflates things it shouldn't), and more than once I've seen this sort of oddball issue resolved by discovering that there's something somewhere with a name that has the same value.

An easy way to check is to temporarily give both the form and the button completely new IDs (like flibbergibbet23 and ohmygodunicorns451) and see if the problem goes away. If so, then you know it's a weird IE name conflict and you can go on a search-and-destroy mission...

Answer 3

don't event.preventDefault() and event.stopPropagation() work for you?

Alternatively the following should work as well:

    function myFunction()
    {
        if(...)
        {
           return true;
        }
        return false;
    }

For

<form id="formId" action="#" onsubmit="return(myFunction())">
...
   <input type="submit" value="submit" />
</form>

Answer 4

One thing you might consider is using button instead of submit as your type attribute.

<button type="submit"></button>

Is the same as

<input type="submit"></button>

But if you use

<button type="button"></button> 

or

<input type="button"></button>

Then use something like:

$(function() {
    $("#buttonId").bind("click", function() {

        // ...do stuff

        //if all conditions are met

        $("formId").trigger("submit");
    });
});

Then it won't submit a form as its default action and you can attach a click listener, etc to it as needed, and have that listener function submit the form instead as long as whatever conditions you specify (if any) are met.

That way you don't have to use what is in my opinion, a bit of a hack to cancel (using e.preventDefault(), returning false, whatever...) a form submit action that didn't have to be fired in the first place. Cancelling the default behavior can sometimes lead to weird and hard to track down side-effects...so why not avoid having to do it in the first place (if you are able to, of course)?

Answer 5

I figured it out.

My solution was to create actions for both the form submit, and the submit button click.

So:

• Pressing 'Enter' in the input box triggered the Form Submit action
• Clicking on the 'Submit' button triggered the Button Click Action

This does mean code duplication, but it now works in IE and others.