La fonction $(form).submit() ; de jQuery ne devrait-elle pas déclencher onSubmit dans la balise du formulaire ?

Question

J'ai les éléments suivants :

<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", la balise onsubmit du formulaire n'est pas déclenchée.

Cette ligne soumet plutôt le formulaire avec succès : $(button.form).submit(); mais saute le alert('here'); dans le onsubmit de 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 si je vais rencontrer un problème dans un navigateur où le onsubmit est déclenché.

Answer 1

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

Según Javascript - capturer onsubmit lors de l'appel de form.submit() :

On m'a récemment demandé : "Pourquoi l'événement form.onsubmit n'est pas déclenché lorsque je soumets mon formulaire en utilisant le javascript ?

La réponse : Les navigateurs actuels ne adhèrent pas à cette partie de la spécification . L'événement se déclenche uniquement lorsqu'il est activé par un utilisateur - et ne se déclenche pas lorsqu'il est activé par code.

(accentuation ajoutée).

Note : "activé par un utilisateur" inclut également l'activation des boutons d'envoi (y compris probablement le comportement d'envoi par défaut de la touche Entrée, mais je n'ai pas essayé). Je ne crois pas non plus qu'il soit déclenché si vous (avec du code) cliquez sur un bouton d'envoi.

Answer 2

Ce site Ce contournement corrigera 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);
}

Fonctionne sur tous les navigateurs modernes.
Fonctionne sur tous les onglets/enfants Windows (oui, même dans IE<9).
Et il est à la vanille !

Il suffit de lui passer une référence DOM à un élément de formulaire et il s'assurera que tous les listeners attachés, le onsubmit, et (si ce n'est pas empêché à ce moment-là) finalement, soumettent le formulaire.

Answer 3

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

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

et ensuite faire de la 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 cela entraînerait une boucle infinie (le MÊME gestionnaire serait appelé, empêcherait la soumission, validerait et soumettrait à nouveau). Vous devez être en mesure de 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 façon dont cette fonctionnalité peut être piratée, et j'ai pensé que cela devait être signalé (et c'est trop long pour un commentaire).

Answer 4

Ma solution simple :

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

C'est un travail pour moi.

Answer 5

Je cherche également une réponse à cette question... Mais je peux vous dire que vous pouvez obtenir le déclenchement de l'onsubmit à partir de javascript de deux façons.

1. Vous pouvez cliquer sur le bouton "submit" (veuillez noter qu'il doit s'agir d'un bouton de type "submit").
2. vous pouvez appeler directement la fonction onSubmit.

Je me demande cependant si cela fonctionne avec jQuery. Cela fonctionne avec le bon vieux javascript, mais si vous essayez de déclencher onSubmit, appeler onsubmit, cela ne fonctionne pas.

Je soupçonne (et je dois aller vérifier si c'est vrai), que vous pouvez utiliser "this" à partir du bouton et ensuite référencer le formulaire dont il fait partie et appeler la fonction onsubmit à partir de là.

 `
<form name="my_form" id="my_form">
<!-- Your form elements -->
<input type='submit' name='my_button'>
<script type="text/javascript">
$('#my_button').click(
      function()
      {
          this.form.onsubmit();
      }
);
</script>
</form>
` 

Une autre façon de s'y rendre...

 `
$('#my_button').attr('form').onsubmit();
` 

Que vous pouvez intégrer dans un autre code pour déclencher la fonction onsubmit, par exemple pour un onChange dans une sélection...

Ce qui ne marche absolument pas, c'est :

$('#my_button').click(
    function()
    {
        $('#my_form').trigger('onsubmit');
        // Or 
        $('#my_form').onsubmit();
       // or 
        $('#my_form').trigger('onSubmit');
       // or  even --
        $('#my_form').submit();
    }
 );