web-dev-qa-db-fra.com

Code JavaScript pour arrêter la soumission du formulaire

Une façon d'arrêter la soumission du formulaire consiste à renvoyer false à partir de votre fonction JavaScript.

Lorsque le bouton de soumission 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?

javascripthtmlforms
176
Muhammad Imran Tariq

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

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

et fonctionnent 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>

Si Chrome 27.0.1453.116 m si le code ci-dessus ne fonctionne pas, veuillez définissez le paramètre returnValue du paramètre du gestionnaire d'événements sur false pour qu'il fonctionne correctement.

Merci Sam pour le partage d'informations.

MODIFIER :

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

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

où validateMyForm () est une fonction qui renvoie false si la validation échoue. Le point clé est d'utiliser l'événement name. Nous ne pouvons pas utiliser, par exemple, e.preventDefault ()

245
Hemant Metalia

Utiliser prévenir par défaut

Boîte à outils Dojo

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();
    });
}
108
Greg Guida

Ce qui suit fonctionne dès maintenant (testé dans Chrome et Firefox):

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

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

41
Vikram Pudi

Il suffit d'utiliser un simple button au lieu d'un bouton d'envoi. Et appelez une fonction JavaScript pour gérer la soumission de formulaire:

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

Fonction dans une balise script:

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

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

14
dku.rajkumar

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

ENFIN, cela a fonctionné pour moi: (si vous ne choisissez pas au moins un élément de case à cocher, il vous avertit et reste dans 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>
5
Gdba

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

<form name="foo" onsubmit="return false">
4
Danial

Je recommanderais de ne pas utiliser onsubmit et d'associer un événement au script.

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

Puis utilisez preventDefault() (ou returnValue = false pour les anciens navigateurs).

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

  // if invalid
  if (e.preventDefault) {
    e.preventDefault();
  } else {
    e.returnValue = false;
  }
}
3
Isaac Abramowitz

Les réponses de Hemant et de Vikram ne fonctionnaient pas vraiment pour moi dans Chrome. Le event.preventDefault (); Le script empêchait la page de soumettre, que la validation soit réussie ou non. Au lieu de cela, je devais déplacer event.preventDefault (); dans la déclaration 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.

1
Jesperai

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

0
Dheeraj Nalawade

Disons que vous avez une forme semblable à celle-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

0
Mauricio Gracia Gutierrez

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
});
0
Matee Gojra