2

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?

Improve this question
2
  • What happens if you don't use .delegate()? Honestly, you've got a unique, one-off form, you probably don't need to use event delegation anyway. Commented Oct 1, 2010 at 1:24
  • 3
    No, it is being generated by the JS as a new form is created on user input. There can be anywhere between 1 and 100 of these created depending on the user. Commented Oct 2, 2010 at 21:57

5 Answers 5

Reset to default
3

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Did you know that you can take it a step further and avoid code duplication? $('form').submit(handlerFn); $('input.submit').click(handlerFn); function handlerFn() { /* do stuff */. Separate your handler into a named function and then you can pass the function object into both handlers.
2

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)?

Improve this answer

2 Comments

Buttons don't trigger on the 'enter' button press in an input form.
+1 - I use this technique and will probably use it again. You simply bind a keypress event to the input fields so that enter key calls your button's click handler. The nice thing is you can actually avoid code duplication this way by just writing code for the click handler and omitting the submit handler.
1

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...

Improve this answer

4 Comments

Good suggestion :) but the id's are all very unique. (I've used friendly ones for the example)
@Valorin: Just to be doubly-sure that you understood me, though, unfortunately IE will confuse id and name values (it mixes them together) and properties on the window object. So it's not just ids...
I'm setting the name and id attr's of the element at the same time. The problem is that IE triggers the form action BEFORE it triggers the JS action, so the JS never gets run. (Cos I am using .delegate())
@Valorin: Now that's interesting...and quite possibly an issue worth raising with the jQuery folks, if you're using the latest (1.4.2). (If you aren't, 1.4.2 had a number of improvements to live and delegate, so this may be fixed in it.)
0

Try this,

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

2 Comments

Yes, that will prevent the form submission. There is the minor issue of the // to logic here bit...
If you're using jQuery, you really should be separating your behavior from your HTML structure. Instead of using an onSubmit in your form, add a listener binding inside your document ready function.
0

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>
Improve this answer

2 Comments

Btw, I just tried your code and it seems to work fine in IE - jsbin.com/esezu3
It doesn't work for my IE installation, so maybe there is something else going on.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.