Javascript: L'entrée ne fonctionne pas pour l'envoi du mot de passe

Question

Je n'arrive pas à faire fonctionner le code suivant: lorsque j'appuie sur enter dans la zone de texte, la fonction n'est pas appelée. Je ne vois pas pourquoi ...

<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

Je ne sais pas pourquoi vous avez besoin de la fonction submitOnEnter.

Pourquoi ne pas simplement changer l'entrée type='button' en type='submit' et changer le mot-clé onclick en onsubmit?

EDIT: Excuses, bien sûr le 'onsubmit' aurait besoin d'être placé dans les étiquettes de formulaire, pas l'entrée. Donner les éléments suivants:

<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

Comme les autres ont dit - supprimer l'événement onclick, changer le bouton à un bouton d'envoi, et mettre le reste de votre code dans une fonction référencée par une étiquette onsubmit sur le formulaire si vous besoin de traiter/reformater les données avant de les soumettre.

Answer 3

Je réécrire tout, et utiliser un input type = « soumettre » au lieu d'un bouton (j'ai aussi changé l'accès au champ de mot de passe, pour pouvoir l'utiliser à 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> 

Modifié: Implémentation de l'onSubmit comme recommandé par @mway (merci).

Answer 4

Après avoir confirmé que vous avez appuyé sur la touche Entrée, vous voulez appeler "evt.preventDefault()" pour empêcher l'action par défaut (c'est-à-dire la soumission du formulaire). Je crois que ce qui se passe est que vous définissez le lieu location.href mais que le formulaire est soumis avant que le chargement ne se produise, il recharge à la place la même page.

D'autres ont mentionné le traitement côté serveur et, du point de vue de la sécurité, c'est probablement une bonne idée. Actuellement, cette page n'a aucune sécurité. Tout le monde peut regarder votre javascript et choisir de naviguer vers l'une des deux pages d'accueil (ou la page d'échec) comme si elles avaient correctement entré le mot de passe. Si cela est censé être sécurisé, alors vous pourriez vouloir lire des articles sur la sécurité. En résumé cependant faire des vérifications de mot de passe et la logique suivante sur le serveur et ne pas avoir des mots de passe qui sont faciles à deviner. :) Vous pouvez également vouloir inclure la vérification qu'ils ont donné le bon mot de passe sur chaque page (par exemple les pages d'accueil). Cela peut facilement être fait en définissant une variable de session une fois que vous avez confirmé leur mot de passe. Pourquoi ne pas utiliser un bouton d'envoi?