Javascript login form doesn't submit when user hits Enter

Question

Hi there,

I'm working on a simple javascript login for a site, and have come up with this:

<form id="loginwindow">
<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="button" value="Check In" name="Submit" onclick=javascript:validate(text2.value,"username",text1.value,"password") />
</p>

</form>
<script language = "javascript">

function validate(text1,text2,text3,text4)
{
 if (text1==text2 && text3==text4)
 load('album.html');
 else 
 {
  load('failure.html');
 }
}
function load(url)
{
 location.href=url;
}
</script>

...which works except for one thing: hitting enter to submit the form doesn't do anything. I have a feeling it's cause I've used "onclick" but I'm not sure what to use instead. Thoughts?

Answer 1

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

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

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

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

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

Your code will then run for both events.

Answer 2

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

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

Answer 3

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 out, there are other problems with your solution. But this should answer your question.

Answer 4

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

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

Answer 5

dang, fast replies guys!

okay yeah so I'm well aware of how flimsy this is security-wise. It's not for anything particularly top secret, so it's not a huge issue, but if you guys could elaborate on your thoughts with code, I'd love to see your ideas. the code i listed is literally all i'm working with at this point, so i can start from scratch if need be.

Answer 6

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

-- only pseudo-secure 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>