Submit form by pressing Enter key without a Submit button

How?

[Purple Martin]

I've got a simple form (it's yet another basic Logon ID and Password form), and it's 'Go' button is generated using CSS (as are all the other buttons in the site for the sake of changing colour schemes and languages for different clients).

The trouble is the form doesn't submit when a person presses the Enter key like it would if I'd used a normal HTML submit button. The user has to click with their mouse on the CSS button.

Is there any way to get the form to submit when the user presses the Enter key? I tried putting a normal Submit button in a layer and moving it off-screen, but that button will only work if you can see it. I also tried using a image-type input with invisible gif, but that only works when it's got the focus.

Thanks in advance!

[txbakers]

I know this generally doesn't work in Netscape at all.

Are you testing in Netscape?

[mivox]

AFAIK, it always works in IE and (it seems) Opera... But never in Netscape 4.x.

Don't think there's a workaround.

[joshie76]

I talk only in terms of IE5+ here.

I too have run into this problem on many occasions and have never quite understood, or indeed discovered, the rules that seem to be at play with regards to submit on enter.

· It always seems to work if you have a true submit input type within the same form tags.

· It also seems to work (without a submit input) if you have only one text field in the form (including passwords).

However, I did find a workaround/hack for IE5+.

Within your form tag include a submit button but set the height and width to 0px in it's style attribute, eg:

<input type="submit" value="" style="height:0px;width:0px" tabindex="999" hidefocus="true" />

The tabindex and hidefocus remove the button from the tab order and prevent the visitor focussing on something they can't see. This is quite important as, if they're likely to be using enter to submit the form there's an equally good chance they'll want to navigate the form with the tab button.

This doesn't work in NN4, NN6, or Opera, only IE5 as far as I know. If anybody has a cross-browser solution to this problem (short of listening for the enter event) or knows the rules of submit on enter I'd be delighted to hear them!

[brotherhood of LAN]

I tried the - the button approach but resorted back to it

I dont know if this problem is mainstream, but if you ever clicked back on the browser the form never seemed to work anymore with a refresh

[Purple Martin]

Thanks for the answers.

I wasn't able to get anything to work using a Submit button the way I wanted it to, but I have found a work-around in the JavaScript Bible that does the job nicely by using the keypress event.

In any function that's called by onLoad add the line:

document.body.onkeypress = enterKey

and then add a new function:

function enterKey(evt) {
  var evt = (evt) ? evt : event
  var charCode = (evt.which) ? evt.which : evt.keyCode
  if (charCode == 13) {
    validateForm()
  }
}

This function calls my validateForm function when the Enter key is pressed (validateForm just makes sure both fields have something in and then submits the form). I've tested it in IE 5.5 and N 6, and according to the Good Book it should work in IE 4+ and NN 4+ (but my client doesn't need those browsers so I haven't bothered testing them).