twitter-bootstrap Bootstrap 3 Modal 中的提交按钮不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21593861/
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
Submit Button in Bootstrap 3 Modal Not Working
提问by evan
I want the form to submit to the same page, so I left the form action black. I've tried using <button type="submit">, <input type="button">and <input type="submit">. Here is the live versionfor more context. When you click "Add Student," then click the "Save Student Info" button, it does nothing, but the close button works.
我希望表单提交到同一页面，因此我将表单操作保留为黑色。我试过使用<button type="submit">,<input type="button">和<input type="submit">。 这是更多上下文的实时版本。当您单击“添加学生”，然后单击“保存学生信息”按钮时，它什么也不做，但关闭按钮起作用。
Here is the code for my modal.
这是我的模态的代码。
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Add a new student</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" method="post" action="">
<div class="form-group">
<div class="col-sm-offset-1 col-sm-10">
<input type="text" class="form-control" id="inputID" placeholder="Student ID Number">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-10">
<input type="text" class="form-control" id="inputLast" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-10">
<input type="text" class="form-control" id="inputFirst" placeholder="First Name">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-10">
<input type="text" class="form-control" id="inputAddress" placeholder="Street Address">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-10">
<input type="text" class="form-control" id="inputCity" placeholder="City">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-10">
<input type="text" class="form-control" id="inputState" placeholder="State">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-10">
<input type="text" class="form-control" id="inputZip" placeholder="Zip">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-10">
<input type="text" class="form-control" id="inputBalance" placeholder="Current Balance">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-10">
<input type="text" class="form-control" id="inputTerm" placeholder="First Term Attended">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" value="Save Student Information" id="submit" name="submit" class="btn btn-primary">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
回答by Tommy42
you can also link a button (or input) outside of a form by using the HTML5 attribute : form
您还可以使用 HTML5 属性链接表单外部的按钮（或输入）：form
exemple from w3schools website :
w3schools 网站的示例：
<form action="demo_form.asp" method="get" id="form1">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
</form>
<button type="submit" form="form1" value="Submit">Submit</button>
回答by ConnorLaCombe
Your submit button is outside of the tag. Just make the form wrap the whole modal window like this...
您的提交按钮在标签之外。只需让表单像这样包裹整个模态窗口......
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<form class="form-horizontal" role="form" method="post" action="">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Add a new student</h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="col-sm-offset-1 col-sm-10">
<input type="text" class="form-control" id="inputID" placeholder="Student ID Number">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-10">
<input type="text" class="form-control" id="inputLast" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-10">
<input type="text" class="form-control" id="inputFirst" placeholder="First Name">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-10">
<input type="text" class="form-control" id="inputAddress" placeholder="Street Address">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-10">
<input type="text" class="form-control" id="inputCity" placeholder="City">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-10">
<input type="text" class="form-control" id="inputState" placeholder="State">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-10">
<input type="text" class="form-control" id="inputZip" placeholder="Zip">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-10">
<input type="text" class="form-control" id="inputBalance" placeholder="Current Balance">
</div>
</div>
<div class="form-group">
<div
class="col-sm-offset-1 col-sm-10">
<input type="text" class="form-control" id="inputTerm" placeholder="First Term Attended">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" value="Save Student Information" id="submit" name="submit" class="btn btn-primary">
</div>
</div><!-- /.modal-content -->
</div>
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
回答by Paulo
Remove the atribute data-dismiss = "modal"in
删除属性附加伤害data-dismiss = "modal"的
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
回答by Mark Eriksson
Because the submit button is outside the form element.
因为提交按钮在表单元素之外。
Wrap the form element around .modal-body - that will ensure that all the form fields and input buttons are in the form to be submitted.
将表单元素包裹在 .modal-body 周围 - 这将确保所有表单字段和输入按钮都在要提交的表单中。
Also, apply some styling to the form with 0 padding and 0 margin as it may push the form making the modal look untidy.
此外，将一些样式应用于具有 0 填充和 0 边距的表单，因为它可能会推动表单，使模态看起来不整洁。
Hope it helps, this is what I do anyway and it works fine for me.
希望它有所帮助，无论如何这就是我所做的，对我来说效果很好。
