web-dev-qa-db-fra.com

Est-ce que jQuery doit être $ (forme) .submit (); ne pas déclencher onSubmit dans la balise de formulaire?

J'ai le suivant:

<script type="text/javascript">
function CancelFormButton(button) {
    $(button.form).submit();
}
</script>

<form onsubmit="alert('here');">
<input type="button" value="Cancel" onClick="CancelFormButton(this);" />
</form>

Lorsque je clique sur le bouton "Annuler", l'envoi de la balise de formulaire n'est pas déclenché.

Au lieu de cela, cette ligne soumet le formulaire avec succès: $(button.form).submit(); mais ignore la alert('here'); dans la sous-soumission de la balise de formulaire.

Est-ce correct ou est-ce que je fais quelque chose de mal?

À propos, dans ce cas, je veux cette fonctionnalité, mais je me demande simplement si je vais rencontrer un problème dans un navigateur où l’envoi est déclenché.

jqueryonsubmit
38
Darryl Hein

Désolé, j'ai mal compris votre question.

Selon Javascript - capturer onsubmit lors de l'appel de form.submit () :

On m'a récemment demandé: "Pourquoi l'événement Form.onsubmit n'est-il pas déclenché lorsque je soumets mon formulaire à l'aide de javascript?" 

La réponse: les navigateurs actuels ne le font pas adhérer à cette partie du code HTML spécification. L'événement ne déclenche que quand il est activé par un utilisateur - et ne se déclenche pas lorsqu'il est activé par code.

(emphase ajoutée).

Remarque: "activé par un utilisateur" inclut également les boutons de soumission (probablement le comportement de soumission par défaut à partir de la touche Entrée mais je n'ai pas essayé cela). Je crois que cela ne se déclenche pas non plus si vous (avec le code) cliquez sur un bouton d'envoi.

49
cletus

Ce travail résoudra le problème trouvé par @Cletus.

function submitForm(form) {
    //get the form element's document to create the input control with
    //(this way will work across windows in IE8)
    var button = form.ownerDocument.createElement('input');
    //make sure it can't be seen/disrupts layout (even momentarily)
    button.style.display = 'none';
    //make it such that it will invoke submit if clicked
    button.type = 'submit';
    //append it and click it
    form.appendChild(button).click();
    //if it was prevented, make sure we don't get a build up of buttons
    form.removeChild(button);
}

Travaillera sur tous les navigateurs modernes.
Travaillera sur plusieurs fenêtres enfants/onglets (oui, même dans IE <9).
Et est à la vanille!

Il suffit de lui transmettre une référence DOM à un élément de formulaire et il s'assurera que tous les écouteurs attachés, onsubmit, et (si cela n'est pas empêché d'ici là), soumettent enfin le formulaire.

25
Hashbrown

Je suppose qu'il est raisonnable de vouloir ce comportement dans certains cas, mais je dirais que le code ne déclenchant pas la soumission d'un formulaire doit (toujours) être le comportement par défaut. Supposons que vous souhaitiez capturer la soumission d’un formulaire avec 

$("form").submit(function(e){
    e.preventDefault();
});

et ensuite faire une validation sur l'entrée. Si le code pouvait déclencher des gestionnaires de soumission, vous ne pourriez jamais inclure

$("form").submit()

à l’intérieur de ce gestionnaire car il en résulterait une boucle infinie (le gestionnaire SAME serait appelé, empêcherait la soumission, validerait et soumettrait à nouveau). Vous devez pouvoir soumettre manuellement un formulaire dans un gestionnaire d'envoi sans déclencher le même gestionnaire.

Je réalise que cela ne répond pas directement à la question, mais il y a beaucoup d'autres réponses sur cette page sur la manière dont cette fonctionnalité peut être piratée, et j'estimais que cela devait être signalé (et que c'est trop long pour un commentaire).

6
tandrewnichols

Ma solution simple:

$("form").children('input[type="submit"]').click();

C'est un travail pour moi.

4
rukeba

Essayez de déclencher un événement () dans votre fonction:

$("form").trigger('submit'); // and then... do submit()
1
Sergei

J'ai trouvé cette question il y a quelques années.

récemment, j'ai essayé de "réécrire" la méthode d'envoi. ci-dessous est mon code

window.onload= function (){
for(var i= 0;i<document.forms.length;i++){
    (function (p){
        var form= document.forms[i];
        var originFn= form.submit;
        form.submit=function (){
            //do something you like
            alert("submitting "+form.id+" using submit method !");
            originFn();
        }
        form.onsubmit= function (){
            alert("submitting "+form.id+" with onsubmit event !");
        }
    })(i);


}

}

<form method="get" action="" id="form1">
<input type="submit" value="提交form1" />
<input type="button" name="" id="" value="button模拟提交1" onclick="document.forms[0].submit();" /></form>

C'est ce qui s'est passé dans IE, mais cela a échoué dans d'autres navigateurs pour la même raison que "cletus"

0
Hafeyang

La solution la plus simple consiste à créer une entrée "temporaire" avec le type submit et le déclic de déclenchement:

var submitInput = $("<input type='submit' />");
$("#aspnetForm").append(submitInput);
submitInput.trigger("click");
0
Kai