How to trigger keyboard click event on a text field using jquery

Question

I want to click enter instead of submit button and I want jquery to do the exact same task as if I were clicking the submit button.

This is what I have but its not working

the jquery

$("#search-friend-text").keypress(function(e){ // start enter click

    switch(e){

        case 13: 
        $.post("<?php echo site_url('userProfile/search_friend'); ?>", 
        $("#add-friend-search").serialize(),
        function(data){
           $("#insert-activity").html(data);
        });

    $("#add-friend-search").slideUp("slow",function(){});
    break;

    }

}); // end enter click

the Html (form)

<form method="post" action="" name="searchFriendForm" id="add-friend-search">
<input type="text" id="search-friend-text" name="searchFriendText">
<input type="button" class="small green button" id="add-friend-button" />


</form>

are you able to say where the error occur ? is the post request done ? firebug can tell you that easily. — Tommaso Barbugli
– Tommaso Barbugli, Commented Apr 22, 2011 at 12:54

Vlad Khomich · Accepted Answer · 2011-04-22 12:52:21Z

4

use e.keyCode :

switch(e.keyCode) {
. ..

answered Apr 22, 2011 at 12:52

Vlad Khomich

5,9001 gold badge30 silver badges40 bronze badges

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

1 Comment

Mottie Over a year ago

+1 and just sharing... either e.keyCode or e.which would work here. I use this page (din.or.jp/~hagi3/JavaScript/JSTips/Mozilla/Samples/KeyEvent.htm) to check myself when I can't remember.

Mottie · Accepted Answer · 2011-04-22 12:58:23Z

2

First off as Vlad has pointed out, you need to provide the switch with the number and not the event object. Secondly, if you are only going to look for one number, there isn't a need to use the switch/case. Try this:

$("#search-friend-text").keypress(function(e) { // start enter click
    if (e.which === 13) {
        $.post("<?php echo site_url('userProfile/search_friend'); ?>", $("#add-friend-search").serialize(), function(data) {
            $("#insert-activity").html(data);
        });
        $("#add-friend-search").slideUp("slow", function() {});
    }
}); // end enter click

answered Apr 22, 2011 at 12:58

Mottie

86.7k30 gold badges132 silver badges248 bronze badges

Comments

Tommaso Barbugli · Accepted Answer · 2011-04-25 10:32:45Z

1

I think this will solve it

switch(e.keyCode)

Since e is the event handler

edited Apr 25, 2011 at 10:32

answered Apr 22, 2011 at 12:56

Tommaso Barbugli

12.1k2 gold badges46 silver badges42 bronze badges

Comments

Donnie · Accepted Answer · 2011-04-22 12:53:44Z

1

You should use the submit event.

$('#search-friend-text').submit(function() {
    // Ajax stuff...
});

answered Apr 22, 2011 at 12:53

Donnie

6,35910 gold badges38 silver badges55 bronze badges

1 Comment

Aaria Carter-Weir Over a year ago

No, you've got a fair point. Any code that happens on submit should kept in as a submit event listener, and artificially triggered if an explicit submit isn't performed.

Liv · Accepted Answer · 2011-04-22 12:52:51Z

0

The event you receive in your keypress is an event object so i'm not sure your switch/case statement would work anyway! and you can trigger a keypress event for an item by simply invoking $("target").keypress( e ) -- where e is an event you need to build that has the character keycode in it ( you will have to set it in evet.which )

answered Apr 22, 2011 at 12:52

Liv

6,1441 gold badge24 silver badges31 bronze badges

Comments

Sergei Golos · Accepted Answer · 2011-04-22 12:55:44Z

0

Well you can take a look at this function in jQuery: triggerHandler

But really, it might be better to move your click event code into a separate function which you can call from the click event and from the keypress event.

answered Apr 22, 2011 at 12:55

Sergei Golos

4,3501 gold badge21 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to trigger keyboard click event on a text field using jquery

6 Answers 6

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related