Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Twitter Bootstrap Modal Form Submit

Tags:

I've recently been fiddling around with twitter bootstrap, using java/jboss, and i've been attempting to submit a form from a Modal interface, the form contains just a hidden field and nothing else so display etc. is unimportant.

The form is external to the modal itself, and I just can't figure out how this would be possible

i've tried adding the modal itself to the form, attempting to used HTML5 form="form_list" and even adding the form to the modal body and using some jquery to force a submit, but nothing appears to work

Below is a sample modal I was attempting to augment to what i needed, the OK button was previously editting to attempt to call jquery functions.

<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>
like image 430
user1890266 Avatar asked Apr 22 '13 18:04

user1890266


People also ask

How can I show data using a modal when clicking a table row using Bootstrap?

On each of your <tr> 's add a data attribute for id (i.e. data-id ) with the corresponding id value and specify a data-target , which is a selector you specify, so that when clicked, bootstrap will select that element as modal dialog and show it.

How do I stop my modal from closing when I click outside?

How do I stop closing the modal when I click outside? Data-keyword="false" is to prevent closing modal while clicking Esc button, while data-backdrop="static" , allows you keep modal pop-up opened when clicking on Gray area.


2 Answers

Updated 2018

Do you want to close the modal after submit? Whether the form in inside the modal or external to it you should be able to use jQuery ajax to submit the form.

Here is an example with the form inside the 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>

And the jQuery ajax to get the form fields and submit it..

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

Bootstrap 3 example


Bootstrap 4 example

like image 135
Zim Avatar answered Sep 20 '22 05:09

Zim


This answer is late, but I'm posting anyway hoping it will help someone. Like you, I also had difficulty submitting a form that was outside my bootstrap modal, and I didn't want to use ajax because I wanted a whole new page to load, not just part of the current page. After much trial and error here's the jQuery that worked for me:

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

To make this work I did this in the modal footer

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

Notice the addition to class of odom-submit. You can, of course, name it whatever suits your particular situation.

like image 32
rjacobsen0 Avatar answered Sep 19 '22 05:09

rjacobsen0