Twitter Bootstrap Modal Formu Gönder

Question

Geçtiğimiz günlerde java/jboss kullanarak twitter bootstrap ile uğraşıyordum ve Modal arabiriminden bir form göndermeyi denedim, form sadece gizli bir alan ve başka hiçbir şey içermiyor Ekran vb önemsizdir.

formu modal için harici ve sadece HTML5 form = "form_list kullanılan çalışırken, ben forma modal kendisi ekleyerek denedim

bu mümkün olacağını anlamaya olamaz "ve hatta modal gövdeye formu eklemek ve bir gönderme zorlamak için biraz jquery kullanarak, ancak hiçbir şey işe yaramıyor gibi görünüyor

Aşağıda, ihtiyacım olan şeyi büyütme girişiminde bulunduğum örnek bir model var, Tamam düğmesi daha önce jquery işlevlerini çağırmayı dener.

<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

Gönderildikten sonra modunu kapatmak istiyor musunuz? Modalın içinde veya dışında bulunan formun formu göndermek için jQuery ajax kullanabilmesi gerekir.

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

Bootply üzerinde çalışma ..

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

Ve form alanlarını almak ve göndermek için jquery ajax: Burada

modal iç form ile bir örnektir http://bootply.com/59864

Answer 2

Bu cevap geç kaldı, ancak birilerine yardım edeceğini umarak gönderiyorum. Sizin gibi benim de bootstrap modelimin dışında bir form göndermede zorluk yaşadım ve ajax kullanmak istemedim çünkü yeni bir sayfanın yüklenmesini istedim, sadece mevcut sayfanın bir parçası değil. çok deneme yanılma sonra burada benim için çalıştı jQuery var:

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

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

Bildirimi sınıfına katılma Odom gönderin ben kalıcı altbilgideki bunu bu işi yapmak için. Elbette, özel durumunuza uygun olan herşeyi adlandırabilirsiniz.

Answer 3

Eski, ancak okuyucuların modal kullanımının tam bir örneğine sahip olmaları için yararlı olabilir.

I (working example jsfiddle) Aşağıdaki gibi yapın:

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

, ben önyükleme 3 kipliklerin taban kullanımına hızlı gitmek izin hangi eModal kullanılması önerilir kavram fiilleri ile daha kolay başa çıkabilmek için.

Answer 4

Ayrıca, form üzerindeki bir gönder düğmesini gizleyerek ve modal düğmeyi tıkladığınızda tetikleyerek bir şekilde hile yapabilirsiniz.