Soumettre la fonction d'appel deux fois

Question

Lorsque je soumets le formulaire avec Enter, cela fonctionne sans aucun problème. Je peux me connecter avec succès. Lorsque je soumets le formulaire à l'aide d'un bouton, la connexion s'effectue avec succès sur Firefox, mais pas sur Chrome. Le problème est qu'il répète la fonction deux fois et envoie un mot de passe haché différent. Comment puis-je faire en sorte que cela fonctionne également sur Chrome ?

Bouton :

<div id="submit" name="submit" value="login" class="ui fluid large pink submit button" onclick="submitForm();">Login</div>

Forme :

<form id="form" autocomplete="off" class="ui large form" id = "form" name="form" method="post" action="php/verify.php" onsubmit="submitForm();">

J'ai ajouté onsubmit="submitForm();" au formulaire, pour appeler la fonction même lorsque je soumets le formulaire avec Enter .

Fonction Javascript :

function submitForm(){
    var form = document.getElementById("form");
    var pwd = document.getElementById('pwd');
    var hash = new jsSHA("SHA-256", "TEXT", {numRounds: 1});
    hash.update(pwd.value);
    var hash = hash.getHash("HEX");
    var password = document.createElement("input");
    password.name="password";
    password.type="hidden";
    password.id = "password";
    password.value = hash;
    alert(password.value);
    form.appendChild(password);
    form.submit();
    pwd.value = "";
}

Answer 1

Dans votre gestionnaire onsubmit, vous soumettez le formulaire :

 form.submit();

Si vous faites cela, le gestionnaire doit renvoyer false, ce qui signifie que vous avez besoin de

<form ... onsubmit="submitForm(); return false;">

Sinon, vous soumettrez le formulaire manuellement, puis le navigateur le soumettra une seconde fois, puisque onsubmit n'a pas renvoyé false ;

Answer 2

Je vois deux causes possibles :

1- Vous avez deux gestionnaires installés : onSubmit y onClick . Au lieu de cela, laissez le onSubmit et utiliser un bouton avec submit type :

<form onsubmit="submitForm()">
  <input type="submit"> <!-- this is equivalent to pressing enter -->
  <button type="submit"></button> <!-- also equivalent -->
</form>

2- Si vous allez manuellement submit le formulaire dans le gestionnaire d'événements, vous devez empêcher le comportement par défaut de se produire, ce qui pourrait expliquer la deuxième soumission (non traitée) :

function submitForm(event) {
  event.preventDefault()
}

Answer 3

Vous avez deux soumissions :

onsubmit="submitForm();" and onclick="submitForm();"

supprimer l'un d'entre eux

Answer 4

Retirer onsubmit="submitForm(); de la <form> et créer la balise <input type="submit" onclick="submitForm();> à l'intérieur du <form> étiquette.

Answer 5

Vous pouvez utiliser un contrôle de saisie (type=submit) au lieu d'une div pour le bouton de connexion.
C'est à peu près cela :

<input type="submit" value="Login" class="ui fluid large pink submit button"/>

L'appel "onsubmit" sera donc suffisant.