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é.

  • Comment puis-je rafraîchir une page de formulaire après la soumission du formulaire à _blank?
  • Pourquoi ma fonction jQuery / Javascript n'est-elle pas appelée correctement avec onsubmit?
  • Safari / chrome onsubmit = "location.reload (true)" ne fonctionne pas
  • Testant si la valeur est une fonction
  • Ajouter ou soustraire des fonctions du gestionnaire d'événements onSubmit?
  • Onsubmit = "return false" n'a aucun effet sur Internet Explorer 7/8 (le formulaire est toujours soumis)
  • Formulaire HTML d'action et onsubmit des problèmes
  • Forme onsubmit contre submit button onclick
  • One Solution collect form web for “Javascript ne fonctionne pas sur submit”

    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> 

    et

     <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> 
    JavaScript rend le site Web intelligent, beauté et facile à utiliser.