Code JavaScript pour arrêter la soumission du formulaire

206

Une façon d'arrêter la soumission d'un formulaire est de renvoyer false depuis votre fonction JavaScript.

Lorsque le bouton Soumettre est cliqué, une fonction de validation est appelée. J'ai un cas en validation de formulaire. Si cette condition est remplie, j'appelle une fonction nommée returnToPreviousPage ();

function returnToPreviousPage() {
    window.history.back();
}

J'utilise JavaScript et Dojo Toolkit .

Revenant plutôt à la page précédente, il soumet le formulaire. Comment puis-je abandonner cette soumission et revenir à la page précédente?

javascript  html  forms 
— Muhammad Imran Tariq
source
RU Bien sûr, cette fonction appelle ?? essayez de mettre en alerte («test»); avant window.history
— samirprogrammer
Oui je suis sûr; son être appelé.
— Muhammad Imran Tariq
8
— TJ

Réponses:

292

Vous pouvez utiliser la valeur de retour de la fonction pour empêcher la soumission du formulaire

<form name="myForm" onsubmit="return validateMyForm();">

et fonctionner comme

<script type="text/javascript">
function validateMyForm()
{
  if(check if your conditions are not satisfying)
  { 
    alert("validation failed false");
    returnToPreviousPage();
    return false;
  }

  alert("validations passed");
  return true;
}
</script>

Dans le cas de Chrome 27.0.1453.116 m si le code ci-dessus ne fonctionne pas, veuillez définir le champ returnValue du paramètre du gestionnaire d'événements sur false pour le faire fonctionner.

Merci Sam d'avoir partagé des informations.

ÉDITER :

Merci à Vikram pour sa solution de contournement si if validateMyForm () renvoie false:

 <form onsubmit="event.preventDefault(); validateMyForm();">

où validateMyForm () est une fonction qui retourne false si la validation échoue. Le point clé est d'utiliser l'événement de nom. Nous ne pouvons pas utiliser pour egepreventDefault ()

— Hemant Metalia
source
1
Juste une supposition: cela ne fonctionne pas pour moi dans la dernière version de Chrome.
— Sam
5
Tout ce qui revient falsene semble avoir aucun effet; Chrome envoie toujours le formulaire. Par exemple onsubmit="return false;",. Cependant, définir le returnValuechamp du paramètre du gestionnaire d'événements sur falsefonctionne pour moi.
— Sam
3
Salut Sam / Hemant, pouvez-vous fournir un exemple de code indiquant comment définir le champ returnValue du paramètre du gestionnaire d'événements sur false, s'il vous plaît.
— JackDev
2
Je pense que puisque c'est la réponse acceptée, elle devrait probablement indiquer comment procéder correctement. Avec JackDev, je me demande comment faire en sorte que cela fonctionne correctement. En l'état, cela ne fonctionne pas
— Cruncher
1
Si validateMyForm()a des erreurs return falsene seront pas atteintes. Cela peut donc échouer. Après plusieurs heures, j'ai trouvé une solution qui fonctionne et je l'ai affichée ci-dessous.
— Vikram Pudi
116

Utiliser empêcher par défaut

Dojo Toolkit

dojo.connect(form, "onsubmit", function(evt) {
    evt.preventDefault();
    window.history.back();
});

jQuery

$('#form').submit(function (evt) {
    evt.preventDefault();
    window.history.back();
});

JavaScript vanille

if (element.addEventListener) {
    element.addEventListener("submit", function(evt) {
        evt.preventDefault();
        window.history.back();
    }, true);
}
else {
    element.attachEvent('onsubmit', function(evt){
        evt.preventDefault();
        window.history.back();
    });
}
— Greg Guida
source
3
Je recommanderais event.preventDefault () plutôt que de retourner false pour de nombreuses raisons, cela devrait être la meilleure réponse: blog.nmsdvid.com/…
— acidjazz
1
Bonne réponse. Mieux que celui choisi.
— Ani Menon
2
Bien, mais où effectueriez-vous la validation souhaitée par l'OP?
— Sahand
1
@acidjazz Mais comment accéder aux données du formulaire après avoir empêché le défaut?
— CodeAt30
@Sahand @ codeat30 Vous pouvez accéder à l'événement target.
— Adrien
50

Fonctionne dès maintenant (testé dans Chrome et Firefox):

<form onsubmit="event.preventDefault(); validateMyForm();">

Où validateMyForm () est une fonction qui retourne falsesi la validation échoue. Le point clé est d'utiliser le nom event. Nous ne pouvons pas utiliser par exemple e.preventDefault().

— Vikram Pudi
source
15

Utilisez simplement un simple buttonbouton au lieu d'un bouton de soumission. Et appelez une fonction JavaScript pour gérer le formulaire de soumission:

<input type="button" name="submit" value="submit" onclick="submit_form();"/>

Fonction dans une scriptbalise:

function submit_form() {
    if (conditions) {
        document.forms['myform'].submit();
    }
    else {
        returnToPreviousPage();
    }
}

Vous pouvez aussi essayer window.history.forward(-1);

— dku.rajkumar
source
J'aime cette approche car elle permet mon cas d'utilisation, les rappels.
— Eddie
12
Cela empêche l'utilisation de la touche Entrée pour soumettre le formulaire. De plus, de nouveaux attributs HTML5 tels que requiredne fonctionneront pas.
— Sam
8

Beaucoup de façons difficiles de faire une chose facile:

<form name="foo" onsubmit="return false">
— Danial
source
3
Cette réponse exacte (OK, pas exacte, car il vous manque un point-virgule) a été soumise 8 mois plus tôt et a des votes négatifs pour une bonne raison. Cela fonctionne la plupart du temps. Mais pas sur tous les navigateurs tout le temps.
— Auspex
3
Je n'ai pas dit que vous aviez besoin d' un point-virgule; J'ai souligné que c'était tout ce qui était différent entre votre réponse et une réponse beaucoup plus ancienne. Le fait que vous me demandiez maintenant de préciser quels navigateurs ne le supportent pas (je n'ai jamais dit qu'il y en avait, j'ai simplement fait remarquer que ça ne marcherait pas toujours), prouve que vous n'avez toujours pas lu toute cette page .
— Auspex
2
Je n'examine généralement pas les votes négatifs, sauf que je ne savais pas que les gens votaient contre le code correct. Techniquement, le point-virgule est superflu, donc c'est faux. Et vous avez dit "il vous manque le point-virgule", ce qui implique qu'il est nécessaire, ce qui est faux. Vous dites que cela "ne fonctionnera pas toujours" mais vous ne pouvez pas signaler un seul cas ou navigateur où cela ne fonctionnera pas? C'est une bonne logique? C'est du bon code. Donc, à moins que vous ne puissiez signaler le cas où cela ne fonctionnera pas, vous n'avez aucun point du tout.
— Danial
Comment cela n'a-t-il pas plus de votes positifs? C'est beaucoup plus concis que les autres exemples.
— Sal Alturaigi
Probablement parce que le titre ne correspond pas à ce que le gars demandait réellement.
— Danial
6

Toutes vos réponses ont donné quelque chose à travailler.

ENFIN, cela a fonctionné pour moi: (si vous ne choisissez pas au moins un élément de case à cocher, il avertit et reste sur la même page)

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <form name="helloForm" action="HelloWorld" method="GET"  onsubmit="valthisform();">
            <br>
            <br><b> MY LIKES </b>
            <br>
            First Name: <input type="text" name="first_name" required>
            <br />
            Last Name: <input type="text" name="last_name"  required />
            <br>
            <input type="radio" name="modifyValues" value="uppercase" required="required">Convert to uppercase <br>
            <input type="radio" name="modifyValues" value="lowercase" required="required">Convert to lowercase <br>
            <input type="radio" name="modifyValues" value="asis"      required="required" checked="checked">Do not convert <br>
            <br>
            <input type="checkbox" name="c1" value="maths"     /> Maths
            <input type="checkbox" name="c1" value="physics"   /> Physics
            <input type="checkbox" name="c1" value="chemistry" /> Chemistry
            <br>

            <button onclick="submit">Submit</button>

            <!-- input type="submit" value="submit" / -->
            <script>
                <!---
                function valthisform() {
                    var checkboxs=document.getElementsByName("c1");
                    var okay=false;
                    for(var i=0,l=checkboxs.length;i<l;i++) {
                        if(checkboxs[i].checked) {
                            okay=true;
                            break;
                        }
                    }
                    if (!okay) { 
                        alert("Please check a checkbox");
                        event.preventDefault();
                    } else {
                    }
                }
                -->
            </script>
        </form>
    </body>
</html>
— Gdba
source
A aussi fonctionné pour moi.
— chetan
4

Sur la base de la réponse de @Vikram Pudi, nous pouvons également faire cela avec du Javascript pur

<form onsubmit="submitForm(event)">
    <input type="text">
    <input type="submit">
</form>

<script type="text/javascript">

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


    }
</script>
— Phan Van Linh
source
3

Je recommanderais de ne pas utiliser onsubmitet de joindre à la place un événement dans le script.

var submit = document.getElementById("submitButtonId");
if (submit.addEventListener) {
  submit.addEventListener("click", returnToPreviousPage);
} else {
  submit.attachEvent("onclick", returnToPreviousPage);
}

Ensuite, utilisez preventDefault()(ou returnValue = falsepour les navigateurs plus anciens).

function returnToPreviousPage (e) {
  e = e || window.event;
  // validation code

  // if invalid
  if (e.preventDefault) {
    e.preventDefault();
  } else {
    e.returnValue = false;
  }
}
— Isaac Abramowitz
source
Pourriez-vous expliquer pourquoi vous n'utiliseriez pas onsubmit?
— theFreedomBanana
C'est peut-être juste une préférence, mais je trouve plus facile de comprendre la fonctionnalité d'une page Web si tous les écouteurs d'événements sont attachés à l'aide JSau lieu d' HTMLutiliser des attributs. De cette façon, vous n'avez pas besoin de sauter d'avant en arrière autant en lisant le code de quelqu'un d'autre
— Isaac Abramowitz
que faire si quelqu'un appuie sur Entrée sur l'une des entrées au lieu de cliquer sur le bouton? en général, ii soumet toujours ...
— bluejayke
1

Disons que vous avez un formulaire similaire à celui-ci

<form action="membersDeleteAllData.html" method="post">
    <button type="submit" id="btnLoad" onclick="confirmAction(event);">ERASE ALL DATA</button>
</form>

Voici le javascript de la fonction confirmAction

<script type="text/javascript">
    function confirmAction(e)
    {
        var confirmation = confirm("Are you sure about this ?") ;

        if (!confirmation)
        {
            e.preventDefault() ;
            returnToPreviousPage();
        }

        return confirmation ;
    }
</script>

Celui-ci fonctionne sur Firefox, Chrome, Internet Explorer (edge), Safari, etc.

Si ce n'est pas le cas, faites le moi savoir

— Mauricio Gracia Gutierrez
source
1
La combinaison de preventDefault()et returnToPreviousPage()est parfaite et élégante. Il interrompt le fonctionnement normal tout comme vous concevriez n'importe quel capteur d'exception pour fonctionner. +1.
— 1934286
1

Les réponses de Hemant et Vikram n'ont pas vraiment fonctionné pour moi dans Chrome. L'événement.preventDefault (); le script a empêché la page de se soumettre malgré la réussite ou l'échec de la validation. Au lieu de cela, j'ai dû déplacer l'événement.preventDefault (); dans l'instruction if comme suit:

    if(check if your conditions are not satisfying) 
    { 
    event.preventDefault();
    alert("validation failed false");
    returnToPreviousPage();
    return false;
    }
    alert("validations passed");
    return true;
    }

Merci à Hemant et Vikram de m'avoir mis sur la bonne voie.

— Jesperai
source
A aussi fonctionné pour moi. Merci.
— ivbtar
1

Par exemple, si vous avez soumis un bouton sur le formulaire, pour arrêter sa propagation, écrivez simplement event.preventDefault (); dans la fonction appelée en cliquant sur le bouton Soumettre ou sur le bouton Entrée.

— Dheeraj Nalawade
source
0

Faites-le simplement ...

<form>
<!-- Your Input Elements -->
</form>

et voici votre JQuery

$(document).on('submit', 'form', function(e){
    e.preventDefault();
    //your code goes here
    //100% works
    return;
});
— Matee Gojra
source
1
y avez-vous utilisé jquery ici?
— Selva Ganapathi
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.