Trigger button click for ajax on enter key

Question

I need to trigger the ajax call when the Enter key is pressed (keycode 13), but this is not triggering the button click correctly:

<div class="input-group col-md-6">
<input type="text" class="form-control" placeholder="Search by Asset ID" maxlength="64" class="form-control" id="imageid" name="imageid"> <span class="input-group-btn">
<button class="btn btn-default image-search" type="button">Search</button>
</span>
</div>

$('#imageid').keyup(function () {
    this.value = this.value.replace(/[^0-9\.]/g, '');
    if (event.keyCode == 13) {
        alert(keyCode);
        event.preventDefault();
        $('.image-search').click();
    }
});

$('.image-search').on('click', function () {
    $.ajax({
        url: url
        method: 'GET',
    });
}

JSfiddle: link

UPDATE: I added the rest of the functionality, and now the keyCode functionality no longer works. I tried creating one $(function () { //code });, but this is making no difference. When removing lines 1-173, the functionality works. I think I'm just missing something simple here...

UPDATED Fiddle: link

score 3 · Answer 1 · edited May 23 '17 at 11:43

3

While you can call .click() directly, you can instead leverage .trigger(). For some technical insight on the difference between the two methods, this answer will shed some light on the topic. As far as best practice, I'd argue this is more intuitive from a code reading perspective. Also, you had a minor syntax issue in your original fiddle, preventing you from moving forward.

Execute all handlers and behaviors attached to the matched elements for the given event type.

$('.image-search').trigger('click');

$(function() {
    $('#imageid').keyup(function () {
        this.value = this.value.replace(/[^0-9\.]/g, '');
        if (event.keyCode == 13) {
            event.preventDefault();
            $('.image-search').trigger('click');
        }
    });

    $('.image-search').on('click', function () {
        alert('triggered!');
    });
});

JSFiddle Link

edited May 23 '17 at 11:43

Community

1
1

answered May 08 '15 at 20:14

scniro

16,844
8
62
106

As it says in that answer, there's no difference between `.trigger("click")` and `.click()` except for a miniscule performance hit because of an extra function call. – Barmar May 08 '15 at 20:38
`.click()` is very idiomatic, I don't see any readability issue. – Barmar May 08 '15 at 20:45
I also prefer `.click(function...)` rather than `.on("click", function...)` – Barmar May 08 '15 at 20:46
I do as well in that sense. To me though, calling `trigger()` in a block of code programmatically seems more verbose than calling `click()`, since we are indeed triggering an event from outside the context of a UI interaction – scniro May 08 '15 at 20:48
To each his own, it's just a style preference. It has nothing to do with the correctness of the code. – Barmar May 08 '15 at 20:49
**UPDATE:** I added the rest of the functionality, and now the `keyCode` functionality no longer works. I tried creating one `$(function () { //code });`, but this is making no difference. When removing lines 1-173, the functionality works. I think I'm just missing something simple here... **UPDATED** Fiddle: http://jsfiddle.net/4uwaz2yd/34/ – Matt May 11 '15 at 17:16
@Matt `Uncaught ReferenceError: ImglyKit is not defined` What is `ImglyKit`? Is this some plugin? Do you need to reference some script library for this? – scniro May 11 '15 at 18:05
@salniro, I don't have that issue, but it's also irrelevant to the issue I'm trying to solve. – Matt May 11 '15 at 18:08
How are you not having that issue? It's thrown right when I fire up that fiddle. Also it's definitely relevant because JS is broken => fiddle broken. Perhaps this could qualify as a new question since this seems to expand the original scope of _this_ question since it was working – scniro May 11 '15 at 18:10

score 0 · Answer 2 · answered May 08 '15 at 20:21

0

You had some errors in your js code:

  $('.image-search').on('click', function () {
       $.ajax({
        url: url
        method: 'GET',
       });
   })//you missed this ")"

Here is the code that works http://jsfiddle.net/4uwaz2yd/6/

answered May 08 '15 at 20:21

JoMendez

880
9
22

@sal niro s answer is much readable and don't forget to pass "event" parameter to the function in order this to work. $('#imageid').keyup(function (event) {..............................}); – Jagath Jayasinghe May 08 '15 at 20:59
@Ravi actually calling `event` in a function block is legal. However, it's common to see shortcut code such as `e.keyCode`. In this case, passing the event parameter explicitly is required such as `function(e) { e.keyCode }` – scniro May 08 '15 at 21:09

Trigger button click for ajax on enter key

2 Answers2