ansaurus

Question

Pressing enter inside a textbox does not fire onclick event of submit button in firefox

Answer 1

+6 A:

From the description of the onclick event:

The onclick event occurs when the pointing device button is clicked over an element. This attribute may be used with most elements.

There is no guarantee there that the UA should generate such an event even when not using a pointing device and clicking something.

You probably want the onsubmit event on a form:

The onsubmit event occurs when a form is submitted. It only applies to the FORM element.

You'll need to wrap a form around your text field and button, though:

<html>
  <head>
    <script language="javascript">
      function callMe()
      {
        alert("You entered: " + document.getElementById("txt").value);
      }
    </script>
  </head>
  <body>
    <form onsubmit="callMe()" action="#">
      <input type="text" id="txt" />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Joey 2009-10-29 10:39:23

I replaced my code with this:<form onsubmit="callMe()"><input type="text" id="txt" /><input type="submit" value="Submit" /></form>And now the function is not called in both IE and FF, what happened is when pressing enter inside the text box the page got reloaded and the text was cleared.I understand that onclick means clicking on the element, but why IE and Chrome fired the event when pressing enter and FF didn't?

Yasmine 2009-10-29 10:47:08

Sorry, the function is called now, I get the alert in both but the page get reloaded and the box cleared but this is not what I want

Yasmine 2009-10-29 10:59:25

It works here, in FF at least. And it doesn't reload. I included an `action="#"` though which should never trigger a reload. But I'm not totally sure of that.

Joey 2009-10-29 11:00:23

well, if the inputs have |name|, the page will reload (because the new URL will include the parameter values), that's the point of submitting a form. If you don't want a reload, you should cancel the submit from the submit handler (|return callMe()| and in callMe return false).

Nickolay 2009-10-29 11:24:12

ok, return false worked and also action="#" but I replaced it withaction="javascript:void(0)" so that the # not get appended to the url in the address bar

Yasmine 2009-10-29 11:31:17

Answer 2

+1 A:

Try adding a form with an onsubmit - this should work (tested with FF 3.5):

<html>
<head>
<script language="javascript">
function callMe()
{
   alert("You entered: " + document.getElementById("txt").value);
}
</script>
</head>
<body>
<form onsubmit="callMe()">
<input type="text" id="txt" />
<input type="submit" value="Submit" />
</form>
</body>
</html>

Dror 2009-10-29 10:41:01

Answer 3

A:

You might want to have a look to the following, too:

http://codingforums.com/showthread.php?t=63818

http://forums.asp.net/p/1229340/2214428.aspx

Roberto Aloi 2009-10-29 10:42:21

Descriptive link titles might be a good start, I think.

Joey 2009-10-29 10:46:02

Answer 4

A:

[edit Initially I misunderstood the situation and posted a different answer.]

Doesn't work in Chrome for me either (4.0.223.11).

The problem is the difference in treating <input>s without a <form> -- if you add an enclosing <form> element, the onclick element fires (you should still use the form's submit handler instead, as Johannes Rössel rightly recommends.

[edit added a note about HTML5]

Note that HTML5 spec mentions dispatching the click event on the submit button:

User agents may establish a button in each form as being the form's default button. This should be the first submit button in tree order whose form owner is that form element, but user agents may pick another button if another would be more appropriate for the platform. If the platform supports letting the user submit a form implicitly (for example, on some platforms hitting the "enter" key while a text field is focused implicitly submits the form), then doing so must cause the form's default button's activation behavior, if any, to be run.

Note that implementing Enter-based activation is not required (although it is implemented in the desktop browsers), and the "activation method" (click event) can be used when the input is a part of a form ("has a form owner"). The definition of the "form owner" is based on having a <form> parent or a form attribute.

I don't see the discussion that led to this decision, so if you have questions, you can ask on public-html mailing list where the spec is discussed.

Nickolay 2009-10-29 11:05:59

ansaurus

tags:

views:

answers:

Pressing enter inside a textbox does not fire onclick event of submit button in firefox

related questions