Formulaire Twitter Bootstrap modal Soumettre

Je me suis récemment mis à jongler avec Twitter bootstrap, en utilisant java / jboss, et je tentais de soumettre un formulaire à partir d’une interface modale, le formulaire ne contient qu’un champ masqué et rien d’autre; afficher, etc. n’a pas d’importance.

La forme est externe au modal lui-même, et je ne peux pas comprendre comment cela serait possible.

j’ai essayé d’append le modal lui-même au formulaire, en essayant d’utiliser HTML5 form = “form_list” et même en ajoutant le formulaire au corps modal et en utilisant un certain jquery pour forcer l’envoi, mais rien ne semble fonctionner

Vous trouverez ci-dessous un exemple de modal que j’essayais d’append à ce dont j’avais besoin. Le bouton OK modifiait précédemment pour tenter d’appeler des fonctions jquery.

   Delete Confirmation
 
  Are you sure you want to delete the user?
 
");

Mise à jour 2018

Voulez-vous fermer le modal après soumission? Que le formulaire soit à l’intérieur du modal ou à l’extérieur de celui-ci, vous devriez pouvoir utiliser jQuery ajax pour le soumettre.

Voici un exemple avec le formulaire à l’intérieur du modal :

 Launch demo modal    Modal header

Et jQuery ajax pour obtenir les champs de formulaire et les soumettre.

 $('#myFormSubmit').click(function(e){ e.preventDefault(); alert($('#myField').val()); /* $.post('http://path/to/post', $('#myForm').serialize(), function(data, status, xhr){ // do something here with response; }); */ });

Exemple de Bootstrap 3

Exemple de Bootstrap 4

Cette réponse est en retard, mais je poste quand même en espérant que cela aidera quelqu’un. Comme vous, j’ai également eu du mal à soumettre un formulaire en dehors de mon modal bootstrap et je ne voulais pas utiliser ajax car je souhaitais charger une toute nouvelle page, et pas seulement une partie de la page en cours. Après de nombreux essais et erreurs, voici le jQuery qui a fonctionné pour moi:

 $(function () { $('body').on('click', '.odom-submit', function (e) { $(this.form).submit(); $('#myModal').modal('hide'); }); });

Pour que cela fonctionne, je l’ai fait dans le bas de page modal

Remarquez l’ajout à la classe d’odom-submit. Vous pouvez, bien sûr, nommer ce qui convient à votre situation particulière.

Ancien, mais peut-être utile pour les lecteurs d’avoir un exemple complet de l’utilisation de modal.

J’aime bien suivre ( exemple de travail jsfiddle ):

 $('button.btn.btn-success').click(function(event) { event.preventDefault(); $.post('getpostcodescript.php', $('form').serialize(), function(data, status, xhr) { // do something here with response; console.info(data); console.info(status); console.info(xhr); }) .done(function() { // do something here if done ; alert( "saved" ); }) .fail(function() { // do something here if there is an error ; alert( "error" ); }) .always(function() { // maybe the good state to close the modal alert( "finished" ); // Set a timeout to hide the element again setTimeout(function(){ $("#myModal").hide(); }, 3000); }); });

Pour traiter plus facilement les modaux, je recommande l’utilisation de eModal , qui permet d’accélérer l’utilisation de base des modaux bootstrap 3.

Vous pouvez également sortingcher d’une certaine manière en masquant un bouton d’envoi sur votre formulaire et en le déclenchant lorsque vous cliquez sur votre bouton modal.

Simple