web-dev-qa-db-fra.com

Formulaire Twitter Bootstrap modal Soumettre

Je me suis récemment mis à bricoler avec Twitter Bootstrap, en utilisant Java/jboss, et j'essayais de soumettre un formulaire à partir d'une interface Modal.

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

j'ai essayé d'ajouter 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 je tentais d’augmenter, le bouton OK modifiait précédemment pour tenter d’appeler des fonctions jquery.

    <div class='modal small hide fade' id='myModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
        <div class='modal-header'>
            <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>
            <h3 id='myModalLabel'>Delete Confirmation</h3>
        </div>
        <div class='modal-body'>
            <p class='error-text'>Are you sure you want to delete the user?</p>
        </div>");
        <div class='modal-footer'>
        <button class='btn btn-danger' data-dismiss='modal' aria-hidden='true'>Cancel</button>
        <button class='btn btn-success' data-dismiss='modal'>Ok</button>
        </div>
    </div>
jqueryformstwitter-bootstrapmodal-dialogsubmit
14
user1890266

Mise à jour 2018

Voulez-vous fermer le modal après l'envoi? Que le formulaire soit dans le modal ou externe, vous devriez pouvoir utiliser jQuery ajax pour soumettre le formulaire.

Voici un exemple avec la forme à l'intérieur du modal:

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <form id="myForm" method="post">
          <input type="hidden" value="hello" id="myField">
            <button id="myFormSubmit" type="submit">Submit</button>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

Et le jQuery ajax pour récupérer les champs du formulaire et le 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 avec Bootstrap 3

Exemple avec Bootstrap 4

26
Zim

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, pas seulement une partie de la page actuelle. 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 pied de page modal

<div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary odom-submit">Save changes</button>
</div>

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

14
rjacobsen0

Ancien, mais peut-être utile pour les lecteurs d'avoir un exemple complet de la façon d'utiliser 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 gérer plus facilement les modaux, je recommande l’utilisation de eModal , qui permet d’accélérer le traitement de base de bootstrap 3.

1
Mike

Simple

<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary" onclick="event.preventDefault();document.getElementById('your-form').submit();">Save changes</button>

1
Jonh bert

Vous pouvez également tricher 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. 

0
Robin P