7
votes

Prévenir la soumission de formulaire (JavaScript)

J'ai un formulaire avec une entrée de texte:

<script>
function someFunc() {
    if (1==2) {
    document.form1.submit();
} else {
            alert("Not submitting");
    }
</script>


2 commentaires

La suggestion du numérique Chris fonctionnera, mais ce n'est pas une "meilleure pratique". Regardez la méthode de JQuery's Event.PreventDafault () Si vous allez ce itinéraire et que votre script soumettez le formulaire lorsque la validation renvoie true. Mais je suggère toujours de regarder ma réponse ci-dessous.


Merci beaucoup pour vos suggestions utiles. 1. Je ne peux pas voir la réponse de Chris numérique. 2. J'ai essayé d'utiliser EventDefault () mais cela n'a pas fonctionné. 3. Pourquoi la "valeur par défaut" de l'entrée de texte est-elle définie sur la soumission du formulaire? L'attribut onchange () (le seul attribut d'action spécifié) indique que ma fonction quelqueefunc (), qui n'appelle pas Document.Form1.Submit (), alors où dans le monde est le code qui a l'idée que le formulaire doit soumettre ? Merci beaucoup d'avance pour clarifier!


3 Réponses :


21
votes

Il y a une faille fondamentale avec cette approche. Vous indiquez actuellement au formulaire que lorsque text1 code> modifie, puis appelez quelquefuncunc () code>. Si true, utilisez JavaScript pour soumettre le formulaire. Si Faux, continuez à propos de votre entreprise. Si vous appuyez sur Entrée dans l'entrée de texte, le formulaire soumet toujours. S'il y a un bouton de soumission qui se clique sur cliqué, le formulaire soumet toujours.

Le moyen de base à approcher ceci est comme: p> xxx pré>

lorsque le point de départ est soumis, appelez quelquefuncunc () code>. Cette fonction doit retourner vrai ou faux. Si cela revient vrai, le formulaire soumet. Si FALSE, le formulaire ne fait rien. P>

Maintenant, votre JavaScript a besoin d'une légère modification: P>

$(document).ready(function(){ 
    $("#form1").submit(function(event){ 
        if ( $('#text1').val() !== "foo" ) {
            alert("Error");
            event.preventDefault(); 
        }
    }); 
});


9 commentaires

Un grand merci pour votre réponse. Cependant, j'ai encore quelques questions: 1. Pourquoi le formulaire se présente-t-il simplement parce que je saisi l'entrée dans l'entrée de texte? Ne devrait-il pas seulement soumettre si une commande document.form1.submit () est exécutée? 2. Je ne vois pas une faille fondamentale dans l'approche, comme cela n'est-il pas parfaitement valide pour ne pas avoir de bouton d'envoi? Je ne veux pas de bouton d'envoi. Je veux seulement soumettre lorsque la zone de texte change, et que lorsque le texte est valide. Merci beaucoup pour vos commentaires!


Un formulaire n'a pas besoin d'un bouton d'envoi. La plupart des navigateurs soumettent des formulaires lorsque vous appuyez sur Entrée à l'intérieur d'une entrée. Prenez ce formulaire de commentaire par exemple: lorsque j'ai fini de taper, je peux cliquer sur "Ajouter un commentaire" ou simplement appuyer sur la touche Entrée et le formulaire soumet. Il est possible d'attraper l'événement de la clé d'événement étant enfoncée et d'arrêter de soumettre le formulaire, mais il n'est pas souvent utilisé car il peut interférer avec le flux de travail d'un utilisateur. C'est lorsque le formulaire est soumis que l'événement Soumettre, qui peut être défini dans la balise de formulaire à l'aide de l'attribut "Onsubmit", est tiré.


Merci beaucoup. C'est utile, mais où est le formulaire d'avoir l'idée qu'il devrait soumettre simplement parce que la clé Entrée est entrée? Je n'ai pas précisé cela. Je spécifiais seulement que Onchange () devrait indiquer quelque pied (). Si je n'avais pas d'attribut onchange (), le formulaire ne penserait pas à soumettre simplement parce que je frappe une entrée dans une entrée de texte. Voulez-vous dire que chaque fois que vous avez un attribut Onchange (), ColdFusion (ou JavaScript) sera automatiquement sur une soumission?


Cela n'a rien à voir avec ColdFusion, c'est la fonctionnalité HTML de base. OnChange se déclenche qu'une fois que le curseur quitte cette entrée particulière et que la valeur de l'entrée a changé. Appuyez sur ENTER dans n'importe quelle entrée de texte incendie automatiquement une soumission de formulaire dans tous les grands navigateurs. J'ai ajouté un lien vers la spécification HTML, spécifiquement à faire avec la soumission de formulaire, à ma réponse.


J'ai compris. C'est très utile. Toutes idées pourquoi ce qui suit ne fonctionne pas ?: $ (document) .Ready (fonction (Fonction () {$ ("# text1"). Onchange (fonction (événement) {Event.PreventDefault ();});});});});


Voir Modifier 2 dans ma réponse.


Merci beaucoup encore. Également très utile, mais pour le tester, j'ai essayé d'arrêter l'événement de changement avec mon code d'origine et il ne s'agit que de tirer. J'ai essayé le changement, Onchange, KeyPress, Clé. Je m'assurais d'inclure le lien JQuery en haut du document, mais le gestionnaire d'événements JQuery ne fonctionne tout simplement pas du tout. Des idées? TKS!


Désolé, le code que vous avez est ".onchange". Ce n'est pas la syntaxe correcte. C'est soit ".on (" changement ", fonction (événement)" ou "Change (fonction (événement) ". J'ai réparé mon exemple.


Merci beaucoup. J'ai essayé ceux aussi, mais pas de chance non plus. Je vais ré-poster pour démarrer un nouveau fil avec sujet de préventivefault (). Tout ce que vous aidez beaucoup apprécié!



2
votes
 var form = document.getElementById("Your Form ID");

 form.addEventListener("submit", function (e) {
      if ("Your Desired Conditions.") {
          e.preventDefault();
      }
 });

0 commentaires

0
votes

Utilisez le code suivant, il fonctionnera parfaitement bien xxx


0 commentaires