Form all'interno del bootstrap modale

Question

Ho un modal che effettua la registrazione dei prodotti. Volevo inviare un modulo all'interno del modale senza lasciare il modale.

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

Answer 1

In primo luogo, impostare un ID sul tuo <form> tag:

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

Se si sta utilizzando jQuery (altamente consigliato), si potrebbe fare questo:

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

Answer 2

Nel mio caso ho solo mettere rendere il pulsante di invio uno il corpo footer e rimuovere i dati-respingere ie:

---

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