Form inside a Bootstrap modal

Question

I have a modal that makes the registration of products. I wanted to submit a form inside the modal without leaving the modal.

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

Newman

You can use an ajax POST request. Please provide some sample code. – Mcnair

jsfiddle.net/L3m9Q/29 – Newman

Are you using jQuery or some other javascript library? – Mcnair

after submit, modal needs to stay open – Newman

Answer 1

Firstly, set an id on your <form> tag:

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

If you were using jQuery (highly recommended), you could do this:

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

Mcnair

as I get the values ​​in my php page, which comes from $ ('# myForm'). serialize () – Newman

the 'somewhere.com/...' url is what would normally be the 'action' for your form, that is where it will POST to. The serialize() function takes all the fields in your form (you have none in your example), and turns them into a JSON object to send as the POST data. – Mcnair

So what this does is that the user can submit the form and get the reply from post page back to the modal as well? – Spent

@user1524316: sort of, although your terminology for 'get the reply back to the modal' is a bit off - it handles the response in the callback function which may or may not be related to the modal. The point is that the modal stays up and the page won't reload until you want something on the page to change. Any changes you want at this point should be specified in the callback function, using the passed back 'data' response as needed. – Mcnair

This will break the HTML5 validation – Taiga

@Aznim, can you please elaborate? – Mcnair

@PinnyM, it's simple. HTML5 has some additional form field attributes like required, that the bootstrap supports with additional css, and disables the submit button until the form is filled out correctly. The code above breaks this validation (and any additional validation that was introduced with HTML5). – Taiga

@Aznim: Understood, updated solution to trigger on form submission rather than click event. – Mcnair

@PinnyM, glad to help :) Also .submit() also works, sorry for not pointing out the exact solution, had to run... – Taiga

Answer 2

In my case I only put make the submit button one the footer body and remove the data-dismiss i.e:

---

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

Executive