IE error triggers click for 2 buttons?

Question

I try to call the submit button when clicked by user. Works fine for all browsers except Internet Explorer 9. The weird thing is that IE insists on launching a click for another button that I never talked about. Am I doing something wrong or how to fix it?

Below is my code. Pressing enter in IE starts sending the message as expected, but for some reason also causes the button to click "some buttons" (even without my key listener):

$('input[type=submit]').click(function () { alert('Submit click'); }); //SIMULATE CLICK IF ENTER PRESSED IN SEARCH $('input[type=text]').keypress(function (event) { var keycode = event.keyCode || event.which; if (keycode == 13) $('input[type=submit]').click(); }); //ROUTE CLEAR HANDLER $('button').click(function () { alert('Button click'); }); 

You can see the error here: http://jsfiddle.net/h64xD/

Answer 1

Here are a few things to keep in mind:

IE9 treats the <button/> element as type="submit" by default. To make it not served, you must be explicit:

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

If you do this, you will notice that the emulated click event no longer triggers <button/> , but 2 events still fire. The reason is that since you have not explicitly defined the <form/> element, IE9 assumes that the controls are in the form, and thus pressing enter in the text field triggers three events:

• the one you emulate
• default submit button behavior

So, to get around this problem, you have to be explicit:

 <button type="button">Some button</button> <form><input type="text" /></form> <input type="submit" value="Submit" /> 

Now here are the reasons why you see behavior in IE. @MrSlayer answers the second problem of stopping the keypress event after you have satisfactorily dealt with it using preventDefault()

Answer 2

The Enter key has a default behavior for sending, so you need to prevent the default behavior from being executed. Since the button tag is, by default, type="submit" , it executes this button when the Enter key is pressed.

 //SIMULATE CLICK IF ENTER PRESSED IN SEARCH $('input[type=text]').keypress(function (event) { var keycode = event.keyCode || event.which; if (keycode == 13) { event.preventDefault(); $('input[type=submit]').click(); } }); 

Answer 3

How to cause a form to start instead of clicking a button?

 $('input[type=text]').keypress(function(e) { var keycode = event.keyCode || event.which, frm = $(this).closest('form'); if (keycode == 13) { e.stopPropagation(); frm.submit(); return false; } return true; }); 

- EDIT -

Updated A bit to stop the spread of the event.

Answer 4

Firstly, you do not need to manually attach an event to submit the form when the user presses enter - the browser is already processing this.

Oddly enough, this is due to the order of the elements, implicit associations of forms, as well as the fact that IE treats the buttons as submit elements.

Try changing the order of these buttons to see what I mean:

 <input type="text" /> <input type="submit" value="Submit" /> <button>Some button</button> 

Naturally, the browser is already instructed to listen to the response to enter on the text input. This will cause the browser to click on the corresponding submit button. In addition, since you have not explicitly specified form or related elements with each other through your form attribute, the browser is trying to do this for you.

In your code, the <button> element was considered a text input submit button (because it was the first submit button in implicit form). Thus, at any time when you press enter on text input, the browser naturally triggers the click event of the associated button.

If you reorder the elements, as I said above, we see the opposite. IE binds another <input> element to a text field. And pressing enter in the text field implicitly triggers a click event on the send input.

You can confirm this behavior by comparing the .form attributes of the various elements. For example, adding some id values ​​will give us easier access to them:

 <button id="fiz">Some Button</button> <input id="foo" type="text" /> <input id="bar" type="submit" value="Submit" /> 

Then do some quick comparisons:

 var button = document.getElementById("fiz"); var text = document.getElementById("foo"); var submit = document.getElementById("bar"); button.form === text.form; // true submit.form === text.form; // true button.form === submit.form; // true 

So, in the end, you can eliminate the ambiguity between the two buttons by declaring the <button> element equal to type='button' or by placing it after the intended submit button.