HTML form won't submit when pressing enter

Discussion in 'Web Design and Development' started by tnsmart, Nov 16, 2010.

Most Liked Posts
  1. tnsmart, Nov 16, 2010

    tnsmart macrumors 6502

    Joined:
    Aug 23, 2008
    #1
    I am trying to get my HTML form (a login page) to submit when pressing enter in the last field, but I don't know how to do it. The submit button works fine, but I want to be able to submit by pressing enter too.

    Here's my code:
    Code:
    <html>

<! This page is the main index page and serves as the login page for all users>
<! This page is referenced by all pages as the default redirect>
<! This page references /verify.php through /verify.js>

  <head>
    <meta http-equiv="refresh" content="120" > 
    <script src="verify.js"></script>
    <title>CASA Login</title>
    <link rel="stylesheet" type="text/css" href="/ref/main.css" />
    <link rel="stylesheet" type="text/css" href="/ref/maincolor.css" />
  </head>
 
<body>

<div id="logo"><img src="/ref/Logo.gif" alt="" /></div>

<table width="500px" id="text">
<tbody>
  <tr>
    <td><label for="name">User Name</label></td>
    <td><label for="pass">Password</label></td>
  </tr>
  <tr>
    <td><input type="text" size="12" name="name" id="name" maxlength="8"/></td>
    <td><input type="password" size="12" name="pass" id="pass" maxlength="8"/></td>
  </tr>
</tbody>
</table>

<div id="submit"><input type="button" value="Login" onclick="verify()" /></div>
<div id="message"></div>

</body>
</html>
    I've done some googleing but most people seem to be asking how to disable the function rather than enable it. If it makes a difference, I'm running the latest version of Firefox. Any help is appreciated.
     
    share
    + Quote Reply
  2. Craigy, Nov 16, 2010

    Craigy macrumors 6502

    Joined:
    Jan 14, 2003
    Location:
    New Zealand
    #2
    You do not have a HTML form on the page. Your imputs must sit within a <form>....</form> tag with a valid method and action.

    See here:
    http://www.w3schools.com/html/html_forms.asp

    Also, your verify.js has no way of triggering at first glance.
     
    share
    + Quote Reply
  3. angelwatt, Nov 16, 2010

    angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    Yea, you'll either need to add a form tag around your form like suggested, or your JavaScript needs to listen for keystrokes and check for the enter key. The form wouldn't work for those with JavaScript disabled though.

    He has a input button with an onclick event handler at the bottom.
     
    share
    + Quote Reply
  4. tnsmart, Nov 16, 2010

    tnsmart thread starter macrumors 6502

    Joined:
    Aug 23, 2008
    #4
    Thanks for the replies. Is it possible to do it without javascript and just <form> and </form>? If so, I'm not sure where to put the tags. Thanks again.
     
    share
    + Quote Reply
  5. Craigy, Nov 16, 2010

    Craigy macrumors 6502

    Joined:
    Jan 14, 2003
    Location:
    New Zealand
    #5
    You'll need to know the follow before you can add the <form> tag

    - What is the name of the page that is handling the login request?
    - Is it expecting a HTTP POST or GET with the details?

    The W3C page in the link I sent over has some easy examples to follow but the main things are the form action (The name if the page that's handling the request) and the form method - either POST or GET.
     
    share
    + Quote Reply
  6. Nermal, Nov 16, 2010
    Last edited: Nov 16, 2010

    Nermal Moderator

    Nermal

    Staff Member

    Joined:
    Dec 7, 2002
    Location:
    New Zealand
    #6
    I don't normally use plain HTML (I use .Net) but shouldn't the submit button be <input type="submit">?
     
    share
    + Quote Reply
  7. Darth.Titan, Nov 17, 2010

    Darth.Titan macrumors 68030

    Darth.Titan

    Joined:
    Oct 31, 2007
    Location:
    Austin, TX
    #7
    Put
    PHP:
    <form name="login" action="verify.php" method="post">
    ...
    </    form>
    around your <table></table> tags. Also as Nermal suggests, you should use a submit form element for the form istead of a button. Your onclick handler can still be used.

    While we're at it, those aren't valid comment tags at the beginning either.
    PHP:
    <!-- Comments should be properly done like this -->
     
    share
    + Quote Reply
(You must log in or sign up to post here.)

Share This Page