Bootstrap 3 modal est fermé lorsque vous appuyez sur Entrée, mais le formulaire n’est pas soumis.

J’ai le modal Twitter Bootstrap 3 suivant, avec un formulaire à l’intérieur du modal:

        Add new page
 
      Label   Page label

Je veux attraper l’événement submit via jQuery:

 $("form").on("submit", function () { alert("foo"); return false; });

Le formulaire n’est pas envoyé en appuyant sur la touche Entrée (lorsqu’une saisie de texte est sélectionnée), mais il est soumis lorsque l’utilisateur clique sur le bouton Ajouter (c’est-à-dire sur un bouton d’envoi).

Je ne trouve pas pourquoi le formulaire n’a pas été envoyé via Enter. Le modal se ferme simplement, mais l’événement submit n’est pas émis / déclenché.

JSFDDLE – où le problème peut être reproduit

Testé sur la version chrome 34.0.1847.116 Ubuntu 14.04 aura (260972) et Firefox 31.0. Même problème sur les deux navigateurs.

vous pouvez simplement changer l’ordre de

 close-button submit-button

 submit-button close-button

ou append

  type="button"

sur votre bouton de fermeture pour qu’il ne soit pas interprété comme un bouton d’envoi

à votre santé

J’ai ajouté un gestionnaire à l’événement close modal pour soumettre le formulaire avant de fermer le modal, comme suit:

 $("#myModal").on("hide.bs.modal", function () { $(this).find('form').submit(); });

J’ai mis à jour jsfiddle en conséquence, http://jsfiddle.net/yAzrs/2/

Vous pouvez également écouter la touche Entrée dans le formulaire lui-même, quelque chose comme ceci:

 $('form').on("keypress", function (e) { if (e.which == 13) $(this).submit(); });

avez-vous essayé d’utiliser

 $(document).keypress(function(e) { if(e.which == 13) { alert('You pressed enter!'); } });

jQuery ne sait pas que vous avez appuyé sur Entrée simplement en appuyant sur Entrée. Incluez le jQuery ci-dessus mais avec votre propre code à l’intérieur de l’instruction if et espérons que cela fonctionne

En appuyant sur Entrée dans le champ de saisie, le bouton avec data-licencié = “modal” a été déclenché, il suffit de changer data-licencié = “modal” en votre bouton d’envoi et de le supprimer