我希望表单提交到同一页面,所以我离开了表单操作黑色。我已经使用<button type="submit">
,<input type="button">
和<input type="submit">
尝试。 Here is the live version更多的上下文。当你点击“添加学生”,然后单击“保存学生信息”按钮,它什么都不做,但关闭按钮的作品。
这里是我的模态代码。
<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 -->
您的提交按钮是标记之外。只是使包装形式这样整个模式窗口...
<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 -->
还可以一种形式的外部,通过使用HTML5属性链接按钮(或输入):形式
例如,从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>
删除属性data-dismiss = "modal"
在
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
因为提交按钮的形式为元件的外部。
环绕.modal体的表单元素 - 这将确保所有的表单字段和输入按钮的形式提交。
此外,还需要一些造型的形式0填充和0保证金,因为它可能会推使模式看起来凌乱的形式。
希望它能帮助,这是我做什么反正对我来说工作正常。