Trigger a button click with jQuery when enter button click

Question

This is jQuery code of mine.instead of using proceed button when i click on enter remaining text boxes should display

$("#btnValidateMember").click(function () {
  if ($("#txtUserEmail").val() == "") {
    $("#txtUserEmail").addClass("error");
    //$("#spnUserEmail").text("required");
  }
  else if($("#spnUserEmail").text() == "")
  {
    GetMemberDetailsbasedonEmailId($("#txtUserEmail").val());
  }
  $("#ddlBusinessState").empty().append($("<option/>"));
  //$("#ddlBusinessCity").empty().append($("<option/>"));
  $("#ddlBusinessState").select2({ placeholder: 'State', allowClear: false });
  //$("#ddlBusinessCity").select2({ placeholder: 'City', allowClear: false, width: '366px' });
  BindStatesBasedOnCountryId("1",`enter code here` "ddlBusinessState", "");enter code here

});

Do you mean hitting on enter button will trigger the click on #btnValidateMember? — Sahil Patel
– Sahil Patel, Commented Jul 26, 2017 at 5:38

Justin Liu · Accepted Answer · 2020-05-15 15:18:26Z

1

$("#textbox").on('keydown', function(e) {
  const ENTER_KEY_CODE = 13;
  const ENTER_KEY = "Enter"
  var keycode = e.keyCode || e.which;
  var key = e.key;
  if (keycode == ENTER_KEY_CODE || key == ENTER_KEY) {
    document.querySelector("#BtnValidateMember").click();
  }
});

.button {
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button:hover {
  background-color: #3e8e41
}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

#textbox {
  border-radius: 15px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="BtnValidateMember" class="button" onclick="alert('Button Pressed')">Button</button>
<input type="search" id="textbox">

edited May 15, 2020 at 15:18

answered May 4, 2020 at 17:17

Justin Liu

6317 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Roko C. Buljan Over a year ago

Stop using which and keyCode. We're humans. Use Event.key.

user13479313 Over a year ago

Sahil Patel · Accepted Answer · 2017-07-26 05:46:53Z

0

Please see this jsbin

$(document).keypress(function(e) {
    if(e.which == 13) {
        $('#btnValidateMember').trigger('click');
    }
});

Above jQuery code will detect the keypress event If you have pressed enter button it will trigger the click event of #btnValidateMember button.

answered Jul 26, 2017 at 5:46

Sahil Patel

1,6402 gold badges17 silver badges35 bronze badges

7 Comments

Roko C. Buljan Over a year ago

OK, 13, but do you know by memory what key is 122? No? Neither do I. Use Event.key.

Sahil Patel Over a year ago

122 is f11 key. Use this css-tricks.com/snippets/javascript/javascript-keycodes

Roko C. Buljan Over a year ago

No. I don't need any table for Event.key

Justin Liu Over a year ago

@Roko Event.key is not supported by Firefox and Internet Explorer

Roko C. Buljan Over a year ago

@JustinLiu can you please report it here? caniuse.com/#feat=keyboardevent-key

|

Collectives™ on Stack Overflow

Trigger a button click with jQuery when enter button click

2 Answers 2

2 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related