Comment annuler une soumission de formulaire dans l'événement onclick du bouton submit?

Question

Je travaille sur une application web ASP.net.

J'ai un formulaire avec un bouton de soumission. Le code du bouton de soumission 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?

Answer 1

Vous êtes mieux faire ...

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

Si isValidForm() retours false, votre formulaire ne présente pas.

Vous devriez également déplacer votre gestionnaire d'événements de inline.

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

Answer 2

utilisation onclick='return btnClick();'

et

function btnClick() { 
    return validData(); 
} 

Answer 3

function btnClick() { 
    return validData(); 
} 

Answer 4

Vous devez changer

onclick='btnClick();' 

à

onclick='return btnClick();' 

et

cancelFormSubmission(); 

à

return false; 

Cela dit, je vais essayer d'éviter l'événement intrinsèque attribue en faveur de unobtrusive JS avec une bibliothèque (comme YUI ou jQuery) qui a un bon événement gérer API et attacher à l'événement qui compte vraiment (à savoir l'événement submit du formulaire au lieu de l'événement click du bouton).

Answer 5

Changer votre entrée à ceci:

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

Et return false dans votre fonction

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

Answer 6

Pourquoi ne pas changer le bouton soumettre à un bouton régulier, et l'événement de clic, soumettez votre formulaire Si cela réussit vos tests de validation?

par exemple

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

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

Answer 7

Vous avez besoin onSubmit. Pas onClick sinon quelqu'un peut simplement appuyer sur Entrée et il va contourner votre validation. Comme pour l'annulation. vous devez retourner faux. Voici le code:

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

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

Modifier onSubmit appartient à la balise form.

Answer 8

Vous devez return false;:

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

function btnClick() { 
    return validData(); 
} 

Answer 9

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 associé quelle que soit l'action que vous voulez le

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

a travaillé pour moi espère que cela aide.

Answer 10

C'est simple, il suffit de retourner false;

Le code ci-dessous va dans le onclick du bouton soumettre en utilisant jquery ..

if(conditionsNotmet) 
{ 
return false; 
} 

Answer 11

Parfois, onsubmit ne fonctionnerait pas avec asp.net. J'ai résolu le problème 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 obtenir cet événement avant que le formulaire postback et l'empêcher de postback et faire tous les ajax vous voulez utiliser ce jquery.

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