Trigger an event on `click` and `enter`

Question

I have a searchbox on my site that. Currently, users must click the submit button next to the box to search via jquery's post. I would like to let users also press enter to search. How can i do this?

JQUERY:

$('document').ready(function(){
    $('#searchButton').click(function(){
        var search = $('#usersSearch').val();
        $.post('../searchusers.php',{search: search},function(response){
            $('#userSearchResultsTable').html(response);
        });
    });
});

HTML:

<input type='text' id='usersSearch'  /><input type='button' id='searchButton' value='search' />

See here: http://stackoverflow.com/questions/699065/submitting-a-form-on-enter-with-jquery — mowwwalker, Feb 05 '12 at 03:21

ShankarSangoli · Accepted Answer · 2012-02-05T04:03:51.527

116

Use keypress event on usersSearch textbox and look for Enter button. If enter button is pressed then trigger the search button click event which will do the rest of work. Try this.

$('document').ready(function(){
    $('#searchButton').click(function(){
        var search = $('#usersSearch').val();
        $.post('../searchusers.php',{search: search},function(response){
            $('#userSearchResultsTable').html(response);
        });
    })
    $('#usersSearch').keypress(function(e){
        if(e.which == 13){//Enter key pressed
            $('#searchButton').click();//Trigger search button click event
        }
    });

});

Demo

edited Feb 05 '12 at 04:03

answered Feb 05 '12 at 03:22

ShankarSangoli

69,612
13
93
124

1

Better yet: use the keyup event instead to ensure your function is only triggered once. Thanks to @StevePaulo for his comment in [this answer](http://stackoverflow.com/a/155263/461544). – steps Nov 07 '14 at 11:57
2

A downside of using keyup that I just discovered: You won't be able to prevent the default action, because the keyup event is fired only _after_ the default action for the key has been executed (see [here](http://www.quirksmode.org/dom/events/keys.html)). – steps Nov 07 '14 at 15:46

score 74 · Answer 2 · answered Dec 21 '13 at 20:25

74

You call both event listeners using .on() then use a if inside the function:

$(function(){
  $('#searchButton').on('keypress click', function(e){
    var search = $('#usersSearch').val();
    if (e.which === 13 || e.type === 'click') {
      $.post('../searchusers.php', {search: search}, function (response) {
        $('#userSearchResultsTable').html(response);
      });
    }
  });
});

answered Dec 21 '13 at 20:25

Gustavo Rodrigues

3,517
1
25
21

10

Why does this answer does not get more votes? I mean this is lesser code blocks (like not to add another event to trigger a click). Any downside of this? – Nin-ya Apr 10 '15 at 05:31
Truly said, Nin-ya & sagarthapa. – Himanshu Aggarwal Jan 28 '16 at 05:41
4

You need to capture the keypress from the search field, and the click from the search button. Those are two separate DOM entities, and so this code won't work. – Moolie Apr 14 '17 at 15:26
It worked for me but I had to add e.preventDefault() as a first line to prevent double execution – Novasol May 30 '18 at 09:15
TIL: I can listen for multiple events with `on()`, Had no idea you could do that! – Scott Fraley May 29 '19 at 21:09

score 6 · Answer 3 · edited Nov 30 '17 at 17:54

6

Something like this will work

$('#usersSearch').keypress(function(ev){
    if (ev.which === 13)
        $('#searchButton').click();
});

edited Nov 30 '17 at 17:54

Diogo Cid

3,764
1
20
25

answered Feb 05 '12 at 03:22

jopke

1,186
6
18

but how can i use both, press search or press enter? – kirby Feb 05 '12 at 03:23
1

You put the code I added in addition to the code you already have. Then both will work. – jopke Feb 05 '12 at 03:23

score 3 · Answer 4 · answered Feb 05 '12 at 03:23

3

$('#form').keydown(function(e){
    if (e.keyCode === 13) { // If Enter key pressed
        $(this).trigger('submit');
    }
});

answered Feb 05 '12 at 03:23

elclanrs

92,861
21
134
171

score 2 · Answer 5 · answered Mar 12 '18 at 06:24

2

you can use below event of keypress on document load.

 $(document).keypress(function(e) {
            if(e.which == 13) {
               yourfunction();
            }
        });

Thanks

answered Mar 12 '18 at 06:24

Asif Ghanchi

236
3
11

score 1 · Answer 6 · edited Mar 05 '14 at 06:26

1

Take a look at the keypress function.

I believe the enter key is 13 so you would want something like:

$('#searchButton').keypress(function(e){
    if(e.which == 13){  //Enter is key 13
        //Do something
    }
});

edited Mar 05 '14 at 06:26

atiquratik

1,296
3
27
34

answered Feb 05 '12 at 03:23

nolt2232

2,594
1
22
33

score 1 · Answer 7 · answered Feb 05 '12 at 03:23

1

$('#usersSearch').keyup(function() { // handle keyup event on search input field

    var key = e.which || e.keyCode;  // store browser agnostic keycode

    if(key == 13) 
        $(this).closest('form').submit(); // submit parent form
}

answered Feb 05 '12 at 03:23

Alex

34,899
5
77
90

Trigger an event on `click` and `enter`

7 Answers7

Linked