Modulo modale Bootstrap di Twitter Invia

Question

Recentemente ho giocato con twitter bootstrap, usando java/jboss, e ho provato a inviare un modulo da un'interfaccia Modal, il modulo contiene solo un campo nascosto e nient'altro display ecc. non è importante.

La forma è esterno al modal in sé, e io non riesco a capire come questo sarebbe possibile

Ho provato ad aggiungere il modal stesso per la forma, il tentativo di utilizzare HTML5 form = "form_list "e anche aggiungendo il modulo al corpo modale e usando un po 'di jquery per forzare un invio, ma nulla sembra funzionare

Di seguito è riportato un modale di esempio che stavo tentando di aumentare a quello che mi serviva, il pulsante OK in precedenza stava modificando tenta di chiamare le funzioni 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> 

Answer 1

Vuoi chiudere il modale dopo l'invio? Sia che si tratti del modulo all'interno del modale che di quello esterno, dovresti essere in grado di utilizzare jQuery ajax per inviare il modulo.

Ecco un esempio con il modulo all'interno della 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> 

E il jquery ajax per ottenere i campi del modulo e presentarlo ..

$('#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; 
     }); 
     */ 
}); 

Lavorando su Bootply: http://bootply.com/59864

Answer 2

Questa risposta è in ritardo, ma sto postando comunque sperando che possa aiutare qualcuno. Come te, ho anche avuto difficoltà ad inviare un modulo che era fuori dal mio modal bootstrap, e non volevo usare ajax perché volevo caricare un'intera nuova pagina, non solo parte della pagina corrente. Dopo molti tentativi ed errori ecco il jQuery che ha funzionato per me:

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

Per fare questo lavoro ho fatto questo nel piè di pagina modale

<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> 

Avviso l'aggiunta alla classe di Odom-presentare. Puoi, ovviamente, nominarlo in base alle tue particolari situazioni.

Answer 3

Vecchio, ma forse utile per i lettori di avere un esempio completo di come utilizzare modale.

mi piace seguente (working example 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); 
    }); 
}); 

Per affrontare più facile con i verbi modali, mi consiglia di utilizzare eModal, che permettono di andare più veloce sull'uso base del bootstrap 3 modali.

Answer 4

Puoi anche imbrogliare in qualche modo nascondendo un pulsante di invio sul modulo e attivandolo quando fai clic sul pulsante modale.