0

I know that if we've a <form> and an <input> with or without submit button, on pressing Enter key will submit that enclosing form. But, IE is submitting (specifically, clicking the first button it encounters) even when there is no <form> tag present.

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <button onclick="alert('button 1 clicked')">button 1</button>
    <button onclick="alert('button 2 clicked')">button 2</button>
    <input type="text" />
</body>
</html>

above markup in Plunkr.

When 'Enter' is pressed with in input field, 'button 1 clicked' alert will be seen.

If I surround <input> with a <form> tag, it is not submitting.

Plunkr

This behavior is observed in IE9 and IE 10 too (haven't tested other versions). Is this a bug in IE or if it is not, how to stop this happening?

Update: if I add, type="button", the said behavior is not observed. Is the default behavior for a <button> tag a submit? and, only IE is behaving like this?

manikanta
  • 8,100
  • 5
  • 59
  • 66
  • http://stackoverflow.com/a/932657/340290 helped me in identifying adding `type="button"` will not cause this effect – manikanta Sep 28 '13 at 08:07

2 Answers2

1

if I add, type="button", the said behavior is not observed. Is the default behavior for a tag a submit? and, only IE is behaving like this?

This answer helped me in identifying adding type="button" will not cause this effect

Community
  • 1
  • 1
manikanta
  • 8,100
  • 5
  • 59
  • 66
0

You can prevent IE from submitting the form by adding 'return false;' in the onclick event. Here is the code :

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
   <button onclick="alert('button 1 clicked'); return false; ">button 1</button>
   <button onclick="alert('button 2 clicked'); return false; ">button 2</button>
   <input type="text" />
</body>
</html>

Moreover you can also prevent the Submit button from submitting the form by adding 'return false' to it.

vijayant
  • 168
  • 2
  • 9
  • but still button will be clicked. ideally, that should not happen. Adding `type="button"` is correct way of fixing it. Please see http://stackoverflow.com/a/932657/340290 – manikanta Sep 28 '13 at 08:34