twitter-bootstrap Twitter Bootstrap 模态表单提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12761423/
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 Submission
提问by Comforse
I am a beginner in Twitter Bootstrap and I am trying to process a form from a modal box, which is also loaded with Ajax. The problem is that I don't know how to use it. I have searched on google for hours, but I couldn't find a good example.
我是 Twitter Bootstrap 的初学者，我正在尝试从模态框处理表单，该框也加载了 Ajax。问题是我不知道如何使用它。我在谷歌上搜索了几个小时，但我找不到一个很好的例子。
I have used jquery ui before and I guess it might be almost the same. I would like to know the following:
我之前使用过 jquery ui，我想它可能几乎相同。我想知道以下内容：
- How do I load a file which contains a form with Ajax
- Does it work to simply use the selectors (e.g. $('#item');) just after the form was loaded, to get the values typed in the forms
- How do I bind the Submit button of the modal to send the form through Ajax to another file
- 如何使用 Ajax 加载包含表单的文件
- 在表单加载后简单地使用选择器（例如 $('#item');) 来获取表单中输入的值是否有效？
- 如何绑定模态的提交按钮以通过Ajax将表单发送到另一个文件
I will appreciate the help and I can provide a form sample below:
我将不胜感激，我可以在下面提供表格示例：
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Submit a link</h3>
</div>
<div class="modal-body">
<div id="msgholder1"></div>
<div id="msg-loader"></div>
<form action="../ajax/controller.php" data-async data-target="#msgholder1" id="add-link-form" method="POST">
<table id="theform">
<tr>
<td>URL:</td>
<td><input type="text" name="url" size="45" class="text ui-widget-content ui-corner-all" id="url" /></td>
</tr>
<tr>
<td>Quality:</td>
<td><select name="quality" id="quality">
<option value="0">Pick One ...</option>
<option value="1">CAM</option>
<option value="2">TS</option>
<option value="3">DVD</option>
</select><br />
</td>
</tr>
<tr>
</fieldset>
</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>
Any kind of related documentation is also useful.
任何类型的相关文档也很有用。
Thanks!
谢谢！
回答by Comforse
After some hours of research and work around, I've got the following working Ajax Modal script:
经过几个小时的研究和解决，我得到了以下可用的 Ajax Modal 脚本：
<script type="text/javascript">
$(document).ready(function() {
$('#addlink').on('click', function(event) {
var href = SITEURL + '/modules/movies/addlink.tpl.php?movie_id=<?php echo $movie->id; ?>';
$.get(href, function(response) {
$('.modal').html(response);
$('.modal').modal({keyboard:true});
$('button#submit_link').bind('click', function()
{
$('.modal-body').html('<p>Loading ...</p>');
$.ajax({
type: 'post',
url: SITEURL + "/ajax/controller.php",
data: 'action=report_link',
dataType : 'html',
context: $(this),
success: function (msg) {
$(".modal-body").html(msg);
}
});
});
});
event.preventDefault();
});
});
</script>
