web-dev-qa-db-fra.com

Comment puis-je annuler la soumission d'un formulaire dans le bouton d'envoi de l'événement onclick?

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 ceci:

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

Comment puis-je faire cela?

javascripthtmlhtml-formhtml-input
92
Daniel Allen Langdon

Vous feriez mieux de faire ...

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

Si isValidForm() renvoie false, votre formulaire ne sera pas soumis.

Vous devriez également probablement déplacer votre gestionnaire d’événements d’inline.

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

Changez votre entrée en ceci:

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

Et retourne faux dans ta fonction

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

Vous devez changer

onclick='btnClick();'

à

onclick='return btnClick();'

et

cancelFormSubmission();

à

return false;

Cela dit, j’essayerais d’éviter les attributs d’événement intrinsèques en faveur de non dissimulé JS avec une bibliothèque (telle que YUI ou jQuery) disposant d’une bonne API de gestion des événements et liée à l’événement qui l’événement submit du formulaire au lieu de l’événement click du bouton).

12
Quentin

vous devriez 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 l'action que vous voulez

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

travaillé pour moi espérons que cela aide.

5
Mohammed

Parfois, onsubmit 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'arrêter à partir de la publication et faire tout le ajax que vous voulez en utilisant cette requête.

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

Vous devez return false;:

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

function btnClick() {
    return validData();
}
3
SLaks

C'est simple, retournez faux;

Le code ci-dessous va dans le clic sur le bouton de soumission en utilisant jquery.

if(conditionsNotmet)
{
return false;
}
1
omar-ali

Pourquoi ne pas changer le bouton d'envoi en un bouton normal, et sur l'événement click, soumettez votre formulaire s'il passe vos tests de validation?

par exemple

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

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

utiliser onclick='return btnClick();'

et

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

Vous avez besoin de onSubmit. Non onClick sinon quelqu'un peut simplement appuyer sur Entrée et votre validation sera ignorée. Quant à annuler. vous devez retourner 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 de formulaire.

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

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