jQuery Twitter Bootstrap 模态表单提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16154216/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap Modal Form Submit
提问by user1890266
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.
我最近一直在摆弄 twitter bootstrap，使用 java/jboss，我一直在尝试从 Modal 界面提交表单，该表单只包含一个隐藏字段，没有其他内容，因此显示等不重要。
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
我尝试将模态本身添加到表单中，尝试使用 HTML5 form="form_list" 甚至将表单添加到模态主体并使用一些 jquery 强制提交，但似乎没有任何效果
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.
下面是一个示例模式，我试图增加我所需要的，确定按钮以前正在编辑以尝试调用 jquery 函数。
<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>
回答by Zim
Updated 2018
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.
提交后要关闭模态吗？无论表单在模态内部还是外部，您都应该能够使用 jQuery ajax 提交表单。
Here is an example with the form inside the modal:
这是一个包含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 ajaxto get the form fields and submit it..
和jQuery ajax来获取表单字段并提交它..
$('#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;
});
*/
});
回答by rjacobsen0
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:
这个答案来晚了，但无论如何我都会发布，希望它能帮助某人。和你一样，我也很难提交一个在我的引导模式之外的表单，我不想使用 ajax，因为我想要加载一个全新的页面，而不仅仅是当前页面的一部分。经过多次反复试验，这里是对我有用的 jQuery：
$(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.
注意 odom-submit 类的添加。当然，您可以将其命名为适合您特定情况的任何名称。
回答by Jonh bert
Simple
简单的
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary" onclick="event.preventDefault();document.getElementById('your-form').submit();">Save changes</button>
回答by Mike Castro Demaria
Old, but maybe useful for readers to have a full example of how use modal.
旧的，但可能对读者有一个如何使用模态的完整示例有用。
I do like following ( working example jsfiddle) :
我喜欢以下（工作示例jsfiddle）：
$('button.btn.btn-success').click(function(event)
{
event.preventDefault();
$.post('getpostcodescript.php', $('form').serialize(), function(data, status, xhr)
{
// do something here with response;
console.info(data);
console.info(status);
console.info(xhr);
})
.done(function() {
// do something here if done ;
alert( "saved" );
})
.fail(function() {
// do something here if there is an error ;
alert( "error" );
})
.always(function() {
// maybe the good state to close the modal
alert( "finished" );
// Set a timeout to hide the element again
setTimeout(function(){
$("#myModal").hide();
}, 3000);
});
});
To deal easier with modals, I recommend using eModal, which permit to go faster on base use of bootstrap 3 modals.
为了更轻松地处理模态，我建议使用eModal，它允许在使用引导程序 3 模态时更快。
回答by Robin P
You can also cheat in some way by hidding a submit button on your form and triggering it when you click on your modal button.
您还可以通过在表单上隐藏提交按钮并在单击模态按钮时触发它来以某种方式作弊。
