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

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?

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

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;
}

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

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");
            });
 });

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.

Vous devez return false;:

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

function btnClick() {
    return validData();
}

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

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.

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;
}

utilisation onclick='return btnClick();'

et

function btnClick() {
    return validData();
}

function btnClick() {
    return validData();
}

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

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

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>