Javascript: Enter does not work for submitting password

Question

I can't get the following code working: when I press enter in the text-box, the function is not called. I can't see why though...

<form>
<p align="center">
<input type="password" class="password" name="text1" onkeypress="submitonenter(text1.value,"money","cash",event)" /><br>
<input type="button" value="Enter" style="width: 100px" name="Enter" onclick=javascript:validate(text1.value,"money","cash") />
</p>
</form>

<script type="text/javascript">
    function submitonenter(text1,text2,text3,evt) {
        evt = (evt) ? evt : ((window.event) ? window.event : "")
        if (evt) {
            // process event here
            if ( evt.keyCode==13 || evt.which==13 ) {

 if (text1==text2)
 load('money/welcome.html');
 else 
 {
  if (text1==text3)
  load('cash/welcome.html');
   else
   {
   load('failure.html');
   }
 }

            }
        }
    }
</script>

<script language = "javascript">
function validate(text1,text2,text3)
{
 if (text1==text2)
 load('money/welcome.html');
 else 
 {
  if (text1==text3)
  load('cash/welcome.html');
   else
   {
   load('failure.html');
   }
 }
}
function load(url)
{
 location.href=url;
}
</script>

Answer 1

I'm not sure why you need the submitOnEnter function at all.

Why not just change the input type='button' to type='submit' and change the onclick keyword to onsubmit?

EDIT: Apologies, of course the 'onsubmit' would need to be placed in the form tags, not the input. Giving the following:

<form onsubmit=validate(text1.value,"money","cash") >
  <p align="center">
    <input type="password" class="password" name="text1" /><br>
    <input type="submit" value="Enter" style="width: 100px" name="Enter" />
  </p>
</form>

Answer 2

Like the others said - remove the onclick event, change the button to a submit button, and put the rest of your code inside a function referenced by an onsubmit tag on the form if you need to process/reformat data before you submit it.

Answer 3

I would rewrite it all, and use a input type="submit" instead a button (I also changed the access to the password field, for being able to use it at Firefox):

<form id="myForm" method="POST" action="failure.html" onsubmit="return validate(document.getElementById('text1').value,'money','cash');">
<p align="center">
<input type="password" class="password" name="text1" id="text1"/><br>
<input type="submit" value="Enter" style="width: 100px" name="Enter" />
</p>
</form>

<script language = "javascript">
    function validate(text1,text2,text3) {
         var form=document.getElementById('myForm');
         if (text1==text2)
            form.action='money/welcome.html';
         else {
          if (text1==text3)
            form.action='cash/welcome.html';
           else {
              form.action='failure.html';
           }
         }
         return true;
    }
</script>

Edited: Implementing the onSubmit as recommended by @mway (thanks).

Answer 4

After you have confirmed that the enter key has been pressed you want to call "evt.preventDefault()" to prevent the default action (ie form submission) from happening. I believe what is happening is that you are setting the location.href but then the form is submitting before that load happens so it reloads the same page instead.

Others have mentioned server side processing and from a security point of view this is probably a good idea. Currently this page has no security whatsoever. Anybody can look at your javascript and choose to navigate to either of the two welcome pages (or the failure page) as if they had put in the password correctly. If this is meant to be secure then you might want to go and read articles about security. In summary though do password checks and following logic on the server and don't have passwords that are that easy to guess. :) Also you might want to include checking they have given the correct password on every page (eg the welcome pages). This can easily be done by setting a session variable once you have confirmed their password.