Javascript ne fonctionne pas sur submit

Dans mon fichier HTML, j'ai le script suivant:

<script language = "javascript"> function validation(){ var x = document.forms["form"]["fieldx"].value; var y = document.forms["form"]["fieldy"].value; var act = document.forms["form"]["action"].value; if(x == null && y == null && act == "delete"){ var z = confirm("Fields have no input. Proceed at your own risk"); if(z==true) return true; else return false; } } </script>

Et la forme:

 <form name="form" onsubmit="return validation()" action="cgi-bin/process.cgi" method="GET"> <input type="text" name="fieldx" /> <input type="text" name="fieldy" /> <input type="submit" name="action" value="insert" /> <input type="submit" name="action" value="delete" /> <input type="submit" name="action" value="update" /> </form>

Avec deux champs de saisie nommés fieldx et fieldy , et un type de soumission appelé action qui peut prendre n'importe quelle valeur (c.-à-d. Insérer, supprimer et mettre à jour) comme indiqué ci-dessus.

Supposons que lorsque le bouton de suppression (et seulement la suppression) est cliqué, il vérifiera s'il y a des entrées dans les deux champs. S'il n'y en a pas, Javascript demandera et demandera à l'utilisateur si elle veut continuer. S'il a cliqué sur oui, eh bien, le processus.cgi sera exécuté et sinon, il retournera simplement à la page HTML. Cependant, lorsque j'ai cliqué sur la suppression, il n'y avait aucune invite et le cgi a été exécuté.

Vous avez deux problèmes:

Premier:

 x == null && y == null

Les valeurs des champs ne seront jamais null . Si rien n'a été entré en eux, leur valeur sera une chaîne vide (c.-à-d. "" ). Donc, vous devez comparer contre cela et non null .

Seconde:

 document.forms["form"]["action"].value

Vous avez plusieurs contrôles nommés action , donc document.forms["form"]["action"] sera un NodeList (qui est comme un Array). Ce ne sera pas un seul élément, et la value sera toujours undefined .

Il n'y a aucun moyen de dire, à partir d'un événement de soumission, lequel contrôle de forme a été utilisé pour activer le formulaire.

Utilisez un onclick sur l'entrée qui vous intéresse plutôt.

 <script> function validation(){ var x = document.forms["form"]["fieldx"].value; var y = document.forms["form"]["fieldy"].value; if(x == "" && y == ""){ return confirm("Fields have no input. Proceed at your own risk"); } } </script>

 <input type="submit" name="action" value="delete" onclick="return validation();">

Une façon plus moderne de l'écrire serait dans ce sens:

 <form action="cgi-bin/process.cgi"> <input type="text" name="fieldx"> <input type="text" name="fieldy"> <input type="submit" name="action" value="insert" /> <input type="submit" name="action" value="delete" /> <input type="submit" name="action" value="update" /> </form> <script> document.querySelector('input[value=delete]').addEventListener('click', validate); function validate(event) { var elements = this.form.elements; if (elements.fieldx.value == "" && elements.fieldy.value == "") { if (!confirm("Fields have no input. Proceed at your own risk")) { event.preventDefault(); } } } </script>