在Bootstrap中提交按钮3模式不工作

我希望表单提交到同一页面，所以我将表单操作留在黑色。我试过使用<button type="submit">，<input type="button">和<input type="submit">。 Here is the live version更多的上下文。当你点击“添加学生”，然后点击“保存学生信息”按钮，它什么也不做，但关闭按钮的作品。在Bootstrap中提交按钮3模式不工作

这是我的模态代码。

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

来源

2014-02-06 evan

它工作正常。您正在使用哪个浏览器？ –

您的提交按钮不在标签中。只是使包装形式这样整个模式窗口...

<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">&times;</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 -->

来源

2014-02-06 04:18:28 ConnorLaCombe

因为提交按钮在表单元素之外。

将表单元素包裹在.modal-body中 - 这将确保所有表单字段和输入按钮都以表单提交。

此外，将一些样式应用于带有0填充和0边距的表单，因为它可能会使表单变得模糊不整。

希望它有帮助，这是我无论如何做的，它对我来说工作正常。

来源

2014-02-06 04:18:28

“将表单元素包裹在.modal-body中 - 这将确保所有表单域和输入按钮都以要提交的形式存在。”那是不正确的。提交和取消按钮位于模态页脚中。当我将表单元素包装在模态主体上时，单击提交按钮时不会发生任何事情...... – Pascal

您也可以将表格之外使用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>

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

来源

2015-05-21 15:04:49 Tommy42

这是唯一不需要将标记刷新的解决方案！ form-attribute使用表单id而不是表单名称，这显然不是IE和Edge支持的，但是老实说，谁在乎...... ;-) – Stivni

-1

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

来源

2015-09-24 05:52:09

请添加一个关于如何解决这个问题的描述用户提问。此外，请阅读[如何回答]（http://stackoverflow.com/help/how-to-answer） – Marusyk

删除属性附加伤害data-dismiss = "modal"在

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

来源

2017-10-05 16:05:39 Paulo

在Bootstrap中提交按钮3模式不工作

回答

相关问题