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

javascript firefox cross-browser forms

10,190

Solution 1

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>

Solution 2

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>

10,190

Author by

Yasmine

Updated on June 04, 2022

Comments

Yasmine about 2 years
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>
```