Submit button in Bootstrap form doesn't react on enter key

18,754

$(function(){
  $('.modal-content').keypress(function(e){
    if(e.which == 13) {
      //dosomething
      alert('Enter pressed');
    }
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">×,
      </span>
    </button>
    <h4 class="modal-title">Datei speichern
    </h4>
  </div>
  <div class="modal-body">
    <p>Gib einen Dateinamen ein
    </p>
    <div class="form-group">
      <label class="input-label" for="project-bar-input">
      </label>
      <input type="text" class="form-control" id="project-bar-input">
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="modal-cancel btn btn-default" data-dismiss="modal">Abbrechen
    </button>
    <button type="submit" class="modal-action btn btn-primary" data-dismiss="modal">Speichern
    </button>
  </div>
</div>
Share:
18,754
Michael
Author by

Michael

Contradictions are an essence of life. For example time and quality, being serious and having fun, deadlines and details. My favourite polarity is programming and communicating openly without fear. I do both with great enthusiasm. With 17 I programmed video games in a professional environment, with 28 secure online banking applications. Later I developed a web archive and a computer playground. In my portfolio you find a selection of my projects. I’m currently fluent in HTML, CSS, JavaScript, jQuery, React/Redux, node.js, Express, Bootstrap, Hugo. But also eager to learn more.

Updated on June 04, 2022

Comments

  • Michael
    Michael about 2 years

    I have following Bootsrap form:

    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×,
          </span>
        </button>
        <h4 class="modal-title">Datei speichern
        </h4>
      </div>
      <div class="modal-body">
        <p>Gib einen Dateinamen ein
        </p>
        <div class="form-group">
          <label class="input-label" for="project-bar-input">
          </label>
          <input type="text" class="form-control" id="project-bar-input">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="modal-cancel btn btn-default" data-dismiss="modal">Abbrechen
        </button>
        <button type="submit" class="modal-action btn btn-primary" data-dismiss="modal">Speichern
        </button>
      </div>
    </div>
    

    I try to catch an ENTER key event with

    $( ".modal-content" ).find( "input#submit" ).click( function() {
        // submit
    });
    

    After reading:

    Submit button not working in Bootstrap form

    But it doesn't work. Why?