twitter-bootstrap 模态引导程序内的表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15279716/
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
Form inside the modal bootstrap
提问by Max
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>
回答by Abdelrahman Elzedy
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">×</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>
回答by PinnyM
Firstly, set an id on your <form>tag:
首先，在你的<form>标签上设置一个 id ：
<form id="myForm" method="post">
...
</form>
If you were using jQuery (highly recommended), you could do this:
如果您使用 jQuery（强烈推荐），您可以这样做：
$(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;
});
});
});
