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

Question

J'ai les informations suivantes:

<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 " Annuler " bouton, 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 le alert('here'); dans la sous-soumission dans la balise de formulaire.

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

Au fait, 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é.

Answer 1

Désolé, vous avez mal compris votre question.

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

  

On m'a récemment demandé: & "Pourquoi la   L'événement form.onsubmit est renvoyé quand je   soumettre mon formulaire en utilisant 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 tire pas lorsqu'il est activé par   code.

(emphase ajoutée).

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

Answer 2

Cette solutionne le problème détecté 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);
}

Fonctionnera sur tous les navigateurs modernes.
Fonctionnera sur plusieurs onglets / fenêtres enfant (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 (s'il n'est pas empêché d'ici là), soumettent enfin le formulaire.

Answer 3

Ma solution simple:

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

C'est un travail pour moi.

Answer 4

Je suppose qu'il est raisonnable de vouloir ce comportement dans certains cas, mais je dirais que le code ne déclenchant pas une soumission de 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();
});

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

$("form").submit()

dans 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 à l’intérieur d’un gestionnaire de soumission 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 c'est trop long pour un commentaire ).

Answer 5

trigger ('submit') ne fonctionne pas. la méthode onSubmit de ne pas être déclenchée. le code suivant fonctionne pour moi, appelez la méthode onSubmit lorsque vous utilisez ce code:

$("form").find(':submit').click();

Answer 6

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

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

Answer 7

Au lieu de

$("form").submit()

essayez ceci

 $("<input type='submit' id='btn_tmpSubmit'/>").css('display','none').appendTo('form');
 $("#btn_tmpSubmit").click();

Answer 8

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

récemment, j'ai essayé de & "réécrire &"; la méthode submit. 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>

Cela s'est produit dans IE, mais a échoué dans d'autres navigateurs pour la même raison que & "; cletus &";

.

Answer 9

Pour résoudre ce problème, la solution la plus simple consiste à créer une entrée "temporaire" de type submit et de cliquer sur le déclencheur:

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