Simulate a button click event when the enter key is pressed (during an opened modal)

Question

I have a modal in my code named myModal. Only when the modal is shown on pressing the enter on my keyboard, I want a button on my modal to be clicked. I have the following code,

HTML

    <div data-backdrop="static" data-keyboard="false" 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"></div>
          <div class="modal-body">
            <table>                     
              <tr>
                <td>Username</td>
                <td style="padding:5px;">
                  <input type="text" id="hostUsername" name="hostUsername" value="root" readonly="readonly">
                </td>
              </tr>    
              <tr>
                <td>Password</td>
                <td style="padding:5px;">
                  <input type="password" id="hostPassword" name="hostPassword" value="KJFDKFGS">
                </td>
              </tr>
            </table>                    
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" onclick="uncheck_host()" >Close</button>
            <button type="button" class="btn btn-primary" id="getDataBt" onclick="getData()">Save changes</button>
          </div>
        </div>
      </div>
    </div>  

JavaScript

    $('#myModal').on('shown.bs.modal', function (event) {                  
      alert("BEFORE ENTER clicked");
      var keycode = (event.keyCode ? event.keyCode : event.which);
      if(keycode == '13'){
        alert("AFTER ENTER clicked");
        $('#getDataBt').click();   
      }     
    });

Here the alert "BEFORE ENTER clicked" is alerted when the modal appears. But on pressing enter on the keyboard after the modal appears, the alert "AFTER ENTER clicked" is not alerted. I need some guidance on this.

Answer 1

You need to check if the modal is open and enter key is pressed, simultaneously. Something like:

$(document).keypress(function(e) {
  if ($("#myModal").hasClass('in') && (e.keycode == 13 || e.which == 13)) {
    alert("Enter is pressed");
  }
});

Here's a fiddle