Bootstrap 3模式在按下输入时关闭，但表单未提交 [英] Bootstrap 3 modal is closed when enter is pressed, but form is not submitted

问题描述

 <！ -  Button。
 
我有以下Twitter Bootstrap 3模式，触发模式 - > 
< button class =btn btn-primary btn-lgdata-toggle =modaldata-target =＃myModal> 
启动演示模式
< / button> 
 
 <！ -  Modal  - > 
< div class =modal fadeid =myModaltabindex = -  1role =dialogaria-labelledby =myModalLabelaria-hidden =true> 
< div class =modal-dialog> 
< div class =modal-content> 
< div class =modal-header> 
 < h2 class =modal-title>新增新页面< / h2> 
< / div> 
< div class =modal-body> 
< form class =form-horizo​​ntal add-new-page-form> 
< fieldset> 
<！ - 标签 - > 
< div class =form-group> 
< label class =col-md-4 control-labelfor =labelInput>标签< / label> 
< div class =col-md-5> 
< input id =labelInputname =labelInputtype =textdata-field =labelclass =form-control input-md> 
< span class =help-block>页面标签< / span> 
< / div> 
< / div> 
 
<！ -  Button（Double） - > 
< div class =form-group> 
< label class =col-md-4 control-labelfor =closeBtn>< / label> 
< div class =col-md-8> 
 < input type =submitid =saveBtnname =saveBtnclass =btn btn-primary add-pagevalue =Add> 
< / div> 
< / div> 
< / fieldset> 
< / form> 
< / div> 
< / div> 
< / div> 
< / div> 
  

我想通过提交事件jQuery：

  $（form）。on（submit，function（）{
 alert（ foo）; 
返回false; 
}）; 
  

不通过按 Enter 键提交表单（当文本输入），但在点击 Add 按钮（即 submit 一个）时提交。

我找不到表单为什么没有通过回车提交。模式只是简单的关闭，但是 submit 事件不会被发射/触发。

/jsfiddle.net/yAzrs/> JSFDDLE - 可以复制问题

测试版本为Chromium 34.0.1847.116 Ubuntu 14.04 aura（260972）和Firefox 31.0。这两个浏览器都是同样的问题。

解决方案

您可以简单地从

 关闭按钮
 
提交按钮
  

到

 提交按钮
 
关闭按钮
  code> 

或添加

 类型=button
  

到您的关闭按钮，因此它不会被解释为提交按钮

干杯

I have the following Twitter Bootstrap 3 modal, with a form inside of the modal:

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- 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>
            <h2 class="modal-title">Add new page</h2>
        </div>
        <div class="modal-body">
            <form class="form-horizontal add-new-page-form">
                <fieldset>
                    <!-- Label -->
                    <div class="form-group">
                      <label class="col-md-4 control-label" for="labelInput">Label</label>
                      <div class="col-md-5">
                      <input id="labelInput" name="labelInput" type="text" data-field="label" class="form-control input-md">
                      <span class="help-block">Page label</span>
                      </div>
                    </div>

                    <!-- Button (Double) -->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="closeBtn"></label>
                        <div class="col-md-8">
                            <button id="closeBtn" name="closeBtn" class="btn btn-default" data-dismiss="modal">Close</button>
                            <input type="submit" id="saveBtn" name="saveBtn" class="btn btn-primary add-page" value="Add">
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
     </div>
  </div>
</div>

I want to catch the submit event via jQuery:

$("form").on("submit", function () {
    alert("foo");
    return false;
});

The form is not submitted via pressing Enter key (when an text input is focused), but it is submitted when Add button (that is a submit one) is clicked.

I cannot find why the form is not submitted via Enter. The modal simply closes, but submit event is not emitted/fired.

JSFDDLE - where the issue can be reproduced

Tested on Chromium Version 34.0.1847.116 Ubuntu 14.04 aura (260972) and Firefox 31.0. Same issue on both browsers.

解决方案

you can simply change the order from

close-button

submit-button

to

submit-button

close-button

or add

 type="button"

to your close button so it doesn´t get interpreted as submit button

cheers

这篇关于Bootstrap 3模式在按下输入时关闭，但表单未提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！