SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jun 2004
    Location
    Toronto, Canada
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    submit js form on Enter key press

    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:

    Code:
    <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:

    Code:
    <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. #2
    SitePoint Zealot
    Join Date
    May 2004
    Location
    houston
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try...

    Code:
    <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

  3. #3
    SitePoint Addict Guimauve's Avatar
    Join Date
    Aug 2004
    Location
    Chicago
    Posts
    255
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jeraych
    try...

    This will probably work, I am not a professional... but try it
    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:

    Code:
    <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. #4
    SitePoint Member
    Join Date
    Jun 2004
    Location
    Toronto, Canada
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Addict Guimauve's Avatar
    Join Date
    Aug 2004
    Location
    Chicago
    Posts
    255
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jrcwild
    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.
    I tested with an image in the following manner, and it continues to work without any extra scripting:

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

  6. #6
    SitePoint Member
    Join Date
    Jun 2004
    Location
    Toronto, Canada
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Guimauve
    I tested with an image in the following manner, and it continues to work without any extra scripting:

    Code:
      <input type="image" value="Login" src="test.gif" height="35" width="100">
    Charles
    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. #7
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    <input type="submit"
    anywhere in the form.

    So just add:
    Code:
    <input type="submit" style="display:none;" />
    to your form.

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •