Bootstrap 3 modal is closed when enter is pressed, but form is not submitted

Question

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.

john Smith · Accepted Answer · 2015-01-25T22:09:36.253

27

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

edited Jan 25 '15 at 22:09

answered Jul 25 '14 at 14:58

john Smith

17,409
11
76
117

I changed the order of the buttons and **it works**. But whyyyy?! I want to use built-in browser submit settings, so other scripts are useless. – Ionică Bizău Jul 25 '14 at 15:01
1

well there seems to be some bootstrap.js that overrides the default behaviour http://stackoverflow.com/questions/10400149/avoid-modal-dismiss-on-enter-keypress – john Smith Jul 25 '14 at 16:37
I saw that question, but they don't explain this problem. :-) – Ionică Bizău Jul 25 '14 at 16:39
3

well the correct answer would be to add type="button" to your close button, then you dont have to change the order – john Smith Jul 25 '14 at 16:41
Add this info to your answer and a JSFIDDLE as well. That's the best. In the previous question, they were setting `type="button"` for the `x` icon. Thank you so much. – Ionică Bizău Jul 25 '14 at 16:44
this has been haunting me for months but i always tabled the issue. THANK YOU for the `type="button"` solution! – Jörn Berkefeld Sep 07 '17 at 08:40
adding type="button" for close button was worked for me +1 – ThilankaD Mar 25 '19 at 06:44
cheers. For bootstrap 4, adding type="button" on the cancel button works for me !!! – Hoang Minh Nov 24 '19 at 07:10
this is lifesafer. spend hours to figure it out lel – Abraham Putra Prakasa Apr 26 '22 at 16:48

score 3 · Answer 2 · answered Jul 25 '14 at 15:02

I've added a handler to the modal close event to submit the form before closing the modal, like so:

$("#myModal").on("hide.bs.modal", function () {
    $(this).find('form').submit(); 
});

I've updated the jsfiddle correspondingly, http://jsfiddle.net/yAzrs/2/

You could also listen for the enter key within the form itself, something like this:

$('form').on("keypress", function (e) {
    if (e.which == 13) $(this).submit();
});

score 2 · Answer 3 · answered Jul 25 '14 at 14:58

2

have you tried using

$(document).keypress(function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

jQuery doesn't know you've pressed enter just simply by you pressing enter. Include the jQuery above but with your own code inside the if statement and hopefully it should work

answered Jul 25 '14 at 14:58

Andrew Matthew

432
1
5
15

I know that, but I want to catch `submit` event. – Ionică Bizău Jul 25 '14 at 14:59

score 0 · Answer 4 · answered Jul 25 '14 at 15:06

Pressing enter in the input field caused button with data-dismiss="modal" to be fired just change data-dismiss="modal" to your submit button and remove from your close button

<input type="submit" id="saveBtn" name="saveBtn" class="btn btn-primary add-page" data-dismiss="modal" value="Add">

Bootstrap 3 modal is closed when enter is pressed, but form is not submitted

4 Answers4

Linked