Comment puis-je annuler la soumission d'un formulaire dans l'événement "Soumettre un clic"?


99

Je travaille sur une application Web ASP.net.

J'ai un formulaire avec un bouton d'envoi. Le code du bouton d'envoi ressemble à <input type='submit' value='submit request' onclick='btnClick();'>.

Je veux écrire quelque chose comme ce qui suit:

function btnClick() {
    if (!validData())
        cancelFormSubmission();
}

Comment puis-je faire cela?


aïe, ça me fait mal à la tête. J'ai plusieurs submitentrées différentes . Je pense que je vais essayer d'utiliser les contrôles côté serveur sur cette page.
Vivian River

Réponses:


183

Vous feriez mieux de faire ...

<form onsubmit="return isValidForm()" />

En cas de isValidForm()retour false, votre formulaire n'est pas soumis.

Vous devriez aussi probablement déplacer votre gestionnaire d'événements depuis inline.

document.getElementById('my-form').onsubmit = function() {
    return isValidForm();
};

Bien, mais il semble que je ne peux pas me rendre onsubmitau travail chaque fois que j'utilise ASP.net parce que asp.net enveloppe TOUT dans sa propre forme ...
Vivian River

5
Vous pouvez utiliser sa deuxième suggestion. Le javascript en ligne est de toute façon le diable.
Stephen

3
Si vous utilisez des formulaires Web ASP.NET (conseil: ne le faites pas), n'essayez pas d'inclure d'autres formulaires. Ils sont tout simplement incompatibles. J'entends ASP.NET MVC vous permet de créer des applications Web à l'aide d'un balisage idiomatique.
Quentin

@David, si l'utilisation d'autres formulaires est incompatible avec les formulaires Web ASP.net, dois-je utiliser uniquement des contrôles côté serveur?
Vivian River

2
Quelqu'un d'autre a répondu EXACTEMENT comme vous stackoverflow.com/a/23604664/1639385 . Je pense que c'était trop une coïncidence.
Ulysses Alves

43

Changez votre entrée en ceci:

<input type='submit' value='submit request' onclick='return btnClick();'>

Et retourne false dans ta fonction

function btnClick() {
    if (!validData())
        return false;
}

13

Vous devez changer

onclick='btnClick();'

à

onclick='return btnClick();'

et

cancelFormSubmission();

à

return false;

Cela dit, j'essaierais d'éviter les attributs d'événements intrinsèques en faveur d'un JS discret avec une bibliothèque (telle que YUI ou jQuery) qui a une bonne API de gestion d'événements et qui est liée à l'événement qui compte vraiment (c'est-à-dire l'événement de soumission du formulaire à la place. de l'événement de clic du bouton).


2
L'utilisation d'onclick permettra à l'utilisateur d'appuyer sur Entrée et de contourner la vérification.
Cfreak

7

Parfois, onsubmitcela ne fonctionnerait pas avec asp.net.

Je l'ai résolu de manière très simple.

si nous avons une telle forme

<form method="post" name="setting-form" >
   <input type="text" id="UserName" name="UserName" value="" 
      placeholder="user name" >
   <input type="password" id="Password" name="password" value="" placeholder="password" >
   <div id="remember" class="checkbox">
    <label>remember me</label>
    <asp:CheckBox ID="RememberMe" runat="server" />
   </div>
   <input type="submit" value="login" id="login-btn"/>
</form>

Vous pouvez maintenant attraper cet événement avant la publication du formulaire et l'empêcher de publier et faire tout l'ajax que vous voulez en utilisant cette jquery.

$(document).ready(function () {
            $("#login-btn").click(function (event) {
                event.preventDefault();
                alert("do what ever you want");
            });
 });

5

vous devez changer le type de submità button:

<input type='button' value='submit request'>

au lieu de

<input type='submit' value='submit request'>

vous obtenez alors le nom de votre bouton en javascript et associez-y l'action que vous voulez

var btn = document.forms["frm_name"].elements["btn_name"];
btn.onclick = function(){...};

travaillé pour moi j'espère que cela aide.


4

Vous devez return false;:

<input type='submit' value='submit request' onclick='return btnClick();' />

function btnClick() {
    return validData();
}

1

Pourquoi ne pas changer le bouton d'envoi en bouton normal, et sur l'événement de clic, soumettre votre formulaire s'il réussit vos tests de validation?

par exemple

<input type='button' value='submit request' onclick='btnClick();'>

function btnClick() { 
    if (validData()) 
        document.myform.submit();
} 

1
Appuyer sur Entrée contournera le chèque. Utiliser onSubmit
Cfreak

Ensuite, cela ne fonctionnera pas du tout si JavaScript n'est pas disponible. <a href=" icant.co.uk/articles/pragmatic-progressive-enhancement/… sur les choses qui fonctionnent</a>.
Quentin

1

Vous avez besoin onSubmit. Non onClicksinon quelqu'un peut presser la touche Entrée et contournera votre validation. Quant à l'annulation. vous devez renvoyer false. Voici le code:

<form onSubmit="return btnClick()">
<input type='submit' value='submit request'>

function btnClick() {
    if (!validData()) return false;
}

Edit onSubmit appartient à la balise form.


cela ne fonctionnera pas. si les données sont valides, vous ne renvoyez pas true. mettez return true; à la fin de la fonction btnClick ()
NickSoft

1

C'est simple, renvoyez simplement false;

Le code ci-dessous va dans le clic du bouton d'envoi en utilisant jquery.

if(conditionsNotmet)
{
return false;
}

0

utilisation onclick='return btnClick();'

et

function btnClick() {
    return validData();
}

2
appuyer sur Entrée contournera la vérification. Utiliser onSubmit
Cfreak

0
function btnClick() {
    return validData();
}

1
Il est nécessaire de faire plus que cela pour que cela fonctionne. J'ai essayé de rendre le functino vrai ou faux et cela ne semble pas faire de différence.
Vivian River

1
Sa réponse est correcte. J'ai voté pour. Vous devez également le retourner dans la balise d'entrée
Cfreak

1
De plus, je préfère utiliser ev.preventDefault()ou ev.returnValue = falseannuler le comportement par défaut, mais pas empêcher le bouillonnement d'événements, au cas où d'autres contrôles observeraient le même événement sur le même élément. Utilisez return falseuniquement lorsque vous souhaitez empêcher l'événement de bouillonner et annuler l'action par défaut. Consultez cet article .
Klemen Slavič

Devoir le renvoyer dans le gestionnaire d'événements lui-même est l'élément d'information très important qui manquait à la réponse. Sans cela, la réponse est incomplète et n'aide pas suffisamment pour valoir un vote positif.
Quentin

0
<input type='button' onclick='buttonClick()' />

<script>
function buttonClick(){
    //Validate Here
    document.getElementsByTagName('form')[0].submit();
}
</script>

2
Pour une réponse utile, cette réaction doit être étendue. Expliquez pourquoi c'est une réponse à la question.
Jeroen Heier

0

Avec JQuery, c'est encore plus simple: fonctionne dans Asp.Net MVC et Asp.Core

<script>
    $('#btnSubmit').on('click', function () {

        if (ValidData) {
            return true;   //submit the form
        }
        else {
            return false;  //cancel the submit
        }
    });
</script>
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.