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: stackoverflow.com/questions/699065/…

mowwwalker
– mowwwalker

2012-02-05 03:21:14 +00:00
Commented Feb 5, 2012 at 3:21 — mowwwalker
– mowwwalker, Commented Feb 5, 2012 at 3:21
Yup, search function is useful...

elclanrs
– elclanrs

2012-02-05 03:26:21 +00:00
Commented Feb 5, 2012 at 3:26 — elclanrs
– elclanrs, Commented Feb 5, 2012 at 3:26

ShankarSangoli · Accepted Answer · 2012-02-05 04:03:51Z

118

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 5, 2012 at 4:03

answered Feb 5, 2012 at 3:22

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

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

2 Comments

steps Over a year ago

Better yet: use the keyup event instead to ensure your function is only triggered once. Thanks to @StevePaulo for his comment in this answer.

steps Over a year ago

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).

Gustavo Rodrigues · Accepted Answer · 2013-12-21 20:25:48Z

76

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, 2013 at 20:25

Gustavo Rodrigues

3,7351 gold badge27 silver badges21 bronze badges

5 Comments

Nin-ya Over a year ago

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?

Himanshu Aggarwal Over a year ago

Truly said, Nin-ya & sagarthapa.

Moolie Over a year ago

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.

Novasol Over a year ago

It worked for me but I had to add e.preventDefault() as a first line to prevent double execution

Scott Fraley Over a year ago

TIL: I can listen for multiple events with on(), Had no idea you could do that!

Diogo Cid · Accepted Answer · 2017-11-30 17:54:26Z

6

Something like this will work

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

edited Nov 30, 2017 at 17:54

Diogo Cid

3,7941 gold badge22 silver badges25 bronze badges

answered Feb 5, 2012 at 3:22

jopke

1,1846 silver badges18 bronze badges

2 Comments

kirby Over a year ago

but how can i use both, press search or press enter?

jopke Over a year ago

You put the code I added in addition to the code you already have. Then both will work.

elclanrs · Accepted Answer · 2012-02-05 03:23:47Z

3

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

answered Feb 5, 2012 at 3:23

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

Comments

Asif Ghanchi · Accepted Answer · 2018-03-12 06:24:24Z

2

you can use below event of keypress on document load.

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

Thanks

answered Mar 12, 2018 at 6:24

Asif Ghanchi

2243 silver badges11 bronze badges

Comments

Alex · Accepted Answer · 2012-02-05 03:23:52Z

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 5, 2012 at 3:23

Alex

35.5k5 gold badges81 silver badges94 bronze badges

Comments

atiquratik · Accepted Answer · 2014-03-05 06:26:57Z

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 5, 2014 at 6:26

atiquratik

1,3003 gold badges28 silver badges35 bronze badges

answered Feb 5, 2012 at 3:23

nolt2232

2,6441 gold badge24 silver badges35 bronze badges

Collectives™ on Stack Overflow

Trigger an event on `click` and `enter`

7 Answers 7

2 Comments

5 Comments

2 Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

5 Comments

2 Comments

Comments

Comments

Comments

Comments

Linked

Related