Question

I have a modal form:

<button class="float-right" type="submit">Login</button>

<div class="block-footer align-right">
<button type="button">Submit</button>
<button type="button">Submit &amp; Close</button>
<button type="button">Close</button>
</div>

How can I make it so the when a user clicks on the Enter key then the first of the buttons “Submit” is “clicked”. It’s important for the click action as I want the user to visually see the color of the button change as it is clicked.

Note that I already did the following and tied the execution of a function to that button:

$('#modal button:contains("Submit")').click(function () {
    submitHandler(dObj.$link, $('#main-form'), false);
}); 

Answer 1

you can use trigger() method:

$('body').on('keyup', function(e) {
   if(e.keyCode == 13) { // when Enter key is pressed trigger click event for first button 
      $('.block-footer button:first').addClass('active').trigger('click')
   }
});