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>
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 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.
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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With