Submit js form on Enter key press

JavaScript
1

I’m a bit of a newbie with js, so at risk of ridicule here goes:

I have a little login script that authenticates multiple users with distinct passwords and directs them to different pages, Form is:



<form name="login">

Username <input type="text" name="username">

Password <input type="password" name="password">

            <input type="button" value="Login" onClick="Login()">

The Login() function called by the onclick event is:


<SCRIPT LANGUAGE="JavaScript">
function Login(){
var done=0;
var username=document.login.username.value;
username=username.toLowerCase();
var password=document.login.password.value;
password=password.toLowerCase();
if (username=="username1" && password=="password1") { window.location="page1.html"; done=1; }
if (username=="username2" && password=="password2") { window.location="page2.html"; done=1; }
if (username=="username3" && password=="password3") { window.location="page3.html"; done=1; }
if (done==0) { alert("Login Invalid - try again."); }
}
// End -->
</SCRIPT>

I’ve tried a lot of different ways to get the Enter button to call the Login() function, but no luck. If I Tab-key the focus to the button after typing the password, it will do it. How do I get the focus over to that darn button, so Enter will trigger it?

Any help appreciated - type slow - I’m stupid…

2

try…


<head>
<script type="text/javascript">
function login() {
if(event.keyCode == 13) {
alert("You hit enter!");
}
}

</script>
</head>
<body onkeyup="login();">

This will probably work, I am not a professional… but try it :slight_smile:

3

Even easier…

By default web browsers submit forms with the enter key as long as there is an input of type submit on the form.

Try this instead, no event handler to worry about or key codes:


<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function Login(){
var done=0;
var username=document.login.username.value;
username=username.toLowerCase();
var password=document.login.password.value;
password=password.toLowerCase();
if (username=="username1" && password=="password1") { window.location="page1.html"; done=1; }
if (username=="username2" && password=="password2") { window.location="page2.html"; done=1; }
if (username=="username3" && password=="password3") { window.location="page3.html"; done=1; }
if (done==0) { alert("Login Invalid - try again."); }
}
// End -->
</SCRIPT>
</head>
<body>
<form name="login" onSubmit="Login(); return false;" action="#">
  Username <input type="text" name="username">
  <br>
  Password <input type="password" name="password">
  <input type="submit" value="Login">
</form>
</body>

Charles

4

Thanks, guys!

Used the second script and it works perfectly.

Question: what if I wanted to use an image instead of the input type=submit. Is there a workaround - I suppose that’s when you get into key codes…

Not an issue at this point, but down the road, I’m sure I’ll want an image for submit.

Thanks, all. This forum is a great resource…

Jesse

5

I tested with an image in the following manner, and it continues to work without any extra scripting:


  <input type="image" value="Login" src="test.gif" height="35" width="100">

Charles

6

You’re absolutely right, Charles. I tested it myself and it sure enough, it works. I thought from your previous post that the input type=submit was the necessary element to ensure Enter key functionality.

Thanks again for your help on this one!

Cheers,
J

7

I did a google search and found this old post. Not to dig up old stuff but reading this thread helped me out so I thought I would help anyone else out that may find it.

The form does submit from any part with the enter keypress if there is a

<input type="submit"

anywhere in the form.

So just add:

<input type="submit" style="display:none;" />

to your form.

8

One should think of non-visual viewers when making such forms… display:none will make three of the most popular screen readers not read it… meaning you’ll need something else to show those clients how to enter/submit the form.

input type=“image” works because it’s actually considered a submit button too.

As an extra note, it would be good if the Username and Password labels were in label tags with for=“blah” used to link (non-visually) the label and the input.

*Oops damn just saw how old this thread is!