Bootstrap modal dialogs with a single text input field always dismiss on Enter key

Question

Why does this simple modal dialog with one text field (and NO buttons) dismiss when the focus is on the field and Enter is pressed?

<a href="#dlgAddDeviceFolder" class="add-device-folder" data-toggle="modal">New Folder</a>

<div id="dlgAddDeviceFolder" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="dlgAddFolderLabel" aria-hidden="true">
  <div class="modal-header">
    <!--<a type="button" class="close" data-dismiss="modal" aria-hidden="true">×</a>-->
    <h3 id="myModalLabel">Add Device Folder</h3>
  </div>

  <div class="modal-body">
    <form class="form-horizontal">
      <div class="control-group">
        <label class="control-label" for="dlgAddDeviceFolder_name">Folder Name</label>
        <div class="controls">
          <input id="dlgAddDeviceFolder_name" type="text" placeholder="Folder Name" autocomplete="off">
        </div>
      </div>
    </form>
  </div>

  <div class="modal-footer">
    <!--<a type="button" class="btn" data-dismiss="modal" aria-hidden="true">Cancel</a>-->
    <!--<a id="dlgAddDeviceFolder_btnOk" type="button" class="btn btn-primary">OK</a>-->
  </div>
</div>

There is extensive discussion here that suggests it is a button issue (I have put type="button" on button and anchor tags. I have converted button tags to anchors). However, I tried all solutions proposed and then ended up just completely commenting out the buttons, and it still happens.

Note that if you simply duplicate the same text input and have two fields, the problem goes away (focusing on either text field will not cause dismissal on Enter)

The answer to this question might help: http://stackoverflow.com/questions/2037910/possible-to-prevent-enter-from-submitting-a-form-in-javascript-from-certain-inpu — mccannf, Mar 06 '13 at 12:02

score 14 · Accepted Answer · edited May 23 '17 at 10:29

Thanks to @mccannf for pointing me in the right direction. This seems to be a more general form submit issue than anything specific to Bootstrap. Two solutions:

1. Set the form's onsubmit attribute to onsubmit="return false;" (https://stackoverflow.com/a/1329168/569091)

I like this solution the best as it seems hard to predict (and is perhaps browser dependent) which form fields may or may not trigger a form submit on typing Enter.

So, in my example from the original Question:

<form class="form-horizontal" onsubmit="return false">

2. Set the onkeydown (or onkeyup?) attribute to return false when event.keyCode == 13 (https://stackoverflow.com/a/2037935/569091) In this link, onkeyup worked, but I had to use onkeydown (browser dependent?)

So, in my example from the original Question:

function ignoreEnter(event)
{
  if (event.keyCode == 13) {
    return false;
  }
}

// and this in the HTML
<input id="dlgAddDeviceFolder_name" type="text" placeholder="Folder Name" onkeydown="return ignoreEnter(event);">

the first solution not worked for me, my form was
, after google, I think solution one was not worked in Firefox and Chrome — raykin, May 22 '13 at 03:35

score 6 · Answer 2 · edited May 23 '17 at 12:18

Its just to clarify the answer before and to respond to the raykin comment.

1. Set the form's onsubmit attribute to onsubmit="return false;" (https://stackoverflow.com/a/1329168/569091)

This solution is helpful when you control the submit of the form by javascript as an example

<div class="modal hide fade" tabindex="-1">
 <div class="modal-header">
      <button class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">{% trans "Create" %}</h3>
  </div>
  <div class="modal-body">
       <form method="POST" class="form-horizontal" onsubmit="return false">
           <input id="id_name" maxlength="250" name="name" type="text">
       </form>
  </div>
  <div class="modal-footer">
    <button id="save-button" class="btn">{% trans "Save" %}</button>
    <button class="btn" aria-hidden="true">{% trans "Cancel" %}</button>
  </div>
</div>

<script>
    $('#save-button').on('click', function(){
        // TODO add ajax call
    });
</script>

As you can see to do a form submit is through the jquery call onclick of the button save id.

But if you want to add action to form tag, then you maybe have to use the second solution

2. Set the onkeydown (or onkeyup?) attribute to return false when event.keyCode == 13 (https://stackoverflow.com/a/2037935/569091)

In my opinion, I dont like this solution in case you want to build the form dinamically.

score 6 · Answer 3 · answered Aug 21 '14 at 07:59

Just a comment to Mara Jimenez post:

There is another way to use action tag, and not to play around with events. You can add dummy invisible input in form, and Enter key would not submit it. Here is sample:

<form role="form" method="post" action="submitform.php">
    <input type="text" id="name" name="name" >
    <input type="text" style="display: none;">
</form>

Bootstrap modal dialogs with a single text input field always dismiss on Enter key

3 Answers3

Linked