CODEWITHSUNDEEP
jqueryhtmlformstwitter-bootstrap
Ionică Bizău
Ionică Bizău

Reputation: 113375

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

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.

Upvotes: 12

Views: 28151

Answers (4)

john Smith
john Smith

Reputation: 17906

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

Upvotes: 27

neno
neno

Reputation: 303

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

Upvotes: 0

bearoplane
bearoplane

Reputation: 387

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();
});

Upvotes: 3

Andrew Matthew
Andrew Matthew

Reputation: 432

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

Upvotes: 2

Related Questions