2013-03-07 18 views
10

Ich habe ein Modal, das die Registrierung von Produkten macht. Ich wollte ein Formular im Modal einreichen, ohne das Modal zu verlassen.Form im modalen Bootstrap

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

<!-- Modal --> 
<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 method="post"> 
     <button 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> 
+0

Sie können eine Ajax-POST-Anfrage verwenden. Bitte geben Sie einen Beispielcode an. – PinnyM

+0

http://jsfiddle.net/L3m9Q/29/ – Max

+0

Verwenden Sie jQuery oder eine andere Javascript-Bibliothek? – PinnyM

Antwort

12

Erstens setzen eine ID auf Ihrem <form> tag:

<form id="myForm" method="post"> 
    ... 
</form> 

Wenn Sie jQuery wurden mit (sehr empfehlenswert), könnten Sie dies tun:

$(function(){ 
    $('#myForm').on('submit', function(e){ 
     e.preventDefault(); 
     $.post('http://www.somewhere.com/path/to/post', 
     $('#myForm').serialize(), 
     function(data, status, xhr){ 
      // do something here with response; 
     }); 
    }); 
}); 
+0

Ich werde diesen Code testen – Max

+0

'http://www.irgendwo.com/path/to/post' -> meine Seite setzen fügt die Daten? – Max

+0

wie ich die Werte in meiner PHP-Seite bekomme, die von $ kommt ('# myForm'). serialize() – Max

13

In meinem Fall habe ich nur setzen Sie die Schaltfläche zum Senden einer der Fußzeile Körper und entfernen Sie die Daten entlassen dh


<div class="modal-content"> 
    <form id="role-form" method="get"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 

      <h4 class="modal-title">تعديل صلاحيات المدير - {{$user->username}}</h4> 
     </div> 
     <div class="modal-body"> 

      <div class="form-group col-md-12"> 

       <select id="role" name="role" class="form-control"> 
        <option selected disabled>الصلاحية</option> 
        <option value='1'>مدير</option> 
        <option value='2'>مشرف</option> 
       </select> 
      </div> 

      <div class="clearfix"></div> 
     </div> 
     <div class="modal-footer"> 

      <button type="submit" class="btn btn-success" >حفظ</button> 
      <button type="button" class="btn btn-default" data-dismiss="modal">إلغاء</button> 

     </div> 
    </form> 
</div> 
Verwandte Themen