[ACCEPTED]-Javascript login form doesn't submit when user hits Enter-html-input

There are several topics being discussed 39 at once here. Let's try to clarify.

1. Your Immediate Concern:

(Why won't the input button work when ENTER is pressed?)

Use 38 the submit button type.

<input type="submit".../> 

..instead of

<input type="button".../>

Your problem 37 doesn't really have anything to do with 36 having used an onclick attribute. Instead, you're 35 not getting the behavior you want because 34 you've used the button input type, which simply 33 doesn't behave the same way that submit 32 buttons do.

In HTML and XHTML, there are 31 default behaviors for certain elements. Input 30 buttons on forms are often of type "submit". In 29 most browsers, "submit" buttons 28 fire by default when ENTER is pressed from a focused element 27 in the same form element. The "button" input type does 26 not. If you'd like to take advantage of 25 that default behavior, you can change your 24 input type to "submit".

For example:

<form action="/post.php" method="post">
    <!-- 
    ...
    -->
    <input type="submit" value="go"/>
</form>

2. Security concerns:

@Ady mentioned 23 a security concern. There are a whole bucket 22 of security concerns associated with doing 21 a login in javascript. These are probably outside of the domain of this question, especially 20 since you've indicated that you aren't particularly 19 worried about it, and the fact that your 18 login method was actually just setting the 17 location.href to a new html page (indicating 16 that you probably don't have any real security 15 mechanism in place).

Instead of drudging 14 that up, here are links to related topics on SO, if anyone is interested 13 in those questions directly.

• Is there some way I can do a user validation client-side?
• Encrypting Ajax calls for authentication in jQuery

3. Other Issues:

Here's a quick cleanup of 12 your code, which just follows some best 11 practices. It doesn't address the security 10 concern that folks have mentioned. Instead, I'm 9 including it simply to illustrate some healthy habits. If you have specific 8 questions about why I've written something 7 a certain way, feel free to ask. Also, browse the stack for related topics (as 6 your question may have already been discussed 5 here).

The main thing to notice is the removal of the event attributes (onclick="", onsubmit="", or 4 onkeypress="") from the HTML. Those 3 belong in javascript, and it's considered 2 a best practice to keep the javascript events 1 out of the markup.

<form action="#" method="post" id="loginwindow">
    <h3>Login to view!</h3>
    <label>User ID: <input type="text" id="userid"></label>
    <label>Password: <input type="password" id="pass"></label>
    <input type="submit" value="Check In" />
</form>

<script type="text/javascript">
window.onload = function () {
    var loginForm = document.getElementById('loginwindow');
    if ( loginwindow ) {
        loginwindow.onsubmit = function () {

            var userid = document.getElementById('userid');
            var pass = document.getElementById('pass');

            // Make sure javascript found the nodes:
            if (!userid || !pass ) {
                return false;
            }

            // Actually check values, however you'd like this to be done:
            if (pass.value !== "secret")  {
                location.href = 'failure.html';
            }

            location.href = 'album.html';
            return false;
        };
    }
};
</script>

Put the script directly in your html document. Change 4 the onclick value with the function you 3 want to use. The script in the html will 2 tell the form to submit when the user hits 1 enter or press the submit button.

 <form id="Form-v2" action="#">

<input type="text" name="search_field"  placeholder="Enter a movie" value="" 
id="search_field" title="Enter a movie here" class="blink search-field"  />
<input type="submit" onclick="" value="GO!" class="search-button" />        
 </form>

    <script>
    //submit the form
    $( "#Form-v2" ).submit(function( event ) {
      event.preventDefault();
    });
         </script>

Instead of <input type="button">, use 3 <input type="submit">. You can put 2 your validation code in your form onsubmit 1 handler:

<form id="loginwindow" onsubmit="validate(...)">

it's because it's not a form submitting, so 5 there's no event to be triggered when the 4 user presses enter. An alternative to the 3 above form submit options would be to add 2 an event listener for the input form to 1 detect if the user pressed enter.

<input type="password" name="text1" onkeypress="detectKey(event)">

My Thought = Massive security hole. Anyone 11 can view the username and password.

More 10 relevant to your question: - You have two 9 events happening.

1. User clicks button.
2. User presses enter.

The enter key submits the 8 form, but does not click the button.

By 7 placing your code in the onsubmit method 6 of the form the code will run when the form 5 is submitted. By changing the input type 4 of the button to submit, the button will 3 submit the form in the same way that the 2 enter button does.

Your code will then run 1 for both events.

Maybe you can try this:

<form id="loginwindow" onsubmit='validate(text2.value,"username",text1.value,"password")'>
<strong>Login to view!</strong>
<p><strong>User ID:</strong>
   <input type="text" name="text2">
</p>
<p><strong>Password:</strong>
<input type="password" name="text1"><br>
   <input type="submit" value="Check In"/>
</p>

</form>

As others have pointed 2 out, there are other problems with your 1 solution. But this should answer your question.

Surely this is too unsecure as everyone 2 can crack it in a second ...

-- only pseudo-secure 1 way to do js-logins are the like:

<form action="http://www.mySite.com/" method="post" onsubmit="this.action+=this.theName.value+this.thePassword.value;">
  Name: <input type="text" name="theName"><br>
  Password: <input type="password" name="thePassword"><br>
  <input type="submit" value="Login now">
</form>