twitter-bootstrap - Bootstrap 3模式中的提交按钮不起作用

Question

我希望表单提交到同一页面，所以我将表单操作保留为黑色。我试过使用 <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">&times;</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 -->

Answer 1

您还可以使用 HTML5 属性链接表单外部的按钮(或输入):form

来自 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>

http://www.w3schools.com/tags/att_button_form.asp