Question

I have this html page which is very simple, it contains a text box and a submit button, what I want is when typing something in the text box and pressing enter the function in the onclick event of the button gets called. It's working in IE and Google Chrome but not working in FireFox, is this a normal behavior of FireFox or there's something am missing here?

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

Solution

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>

OTHER TIPS

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>

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

As far as I know, you cannot call 'OnClick' inside a 'TextBox'. It has to be outside of the TextBox.

If you type your text into the TextBox, left mouse click somewhere else on your page, then hit Enter, the OnClick event will work, oddly enough.

If you find a work around please let us know.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top