CODEWITHSUNDEEP
javascriptjquerydomjquery-events
Tom
Tom

Reputation: 121

Clicking a link when enter key is pressed using jQuery

I'm trying to make it so when a user is in a text box and they press enter, it is the same as clicking the link, in which case it should take them to another page. Here's what I have and it doesn't work.

The code

//jQuery 
$(document).ready(function() {

  //if focus is in the input box drivingSchoolInput
  $("#drivingSchoolInput").live("click", function() {

    //if enter key is pressed
    if(e.keyCode == 13) {

        //click the button and go to next page
        $("#button1").click();
    }       
  });   
});

The markup

<form>      
  <div class="formDiv">
    <label for="City">Search by Driving School</label>
    <span class="inputBox"><input type="text" name="City" class="input" id="drivingSchoolInput" /></span>
  </div>

  <h4 class="submitButton"><a href="school.html" id="button1">Submit</a></h4>     
</form>

Upvotes: 12

Views: 23854

Answers (7)

Alan
Alan

Reputation: 399

I wanted to do something similar, so after reading David K Egghead's suggestion above I came up with this which triggers a "click" even on an anchor when enter is pressed. Could be used to "click" a button as well!

$(document).keypress(function(event){if(event.keyCode==13){$('.save_icon').trigger("click");}});

Upvotes: 1

Ravi Ram
Ravi Ram

Reputation: 24488

I used the following with asp.net LinkButton

        $('#drivingSchoolInput').keypress(function (event) {
            if (event.keyCode == 13) {
                eval($('#button1').attr('href'));
            }
        });

I also had a FORM on the header with allowed for seaching, so I need to add another step to disable the FORM from posting.

        $('#drivingSchoolInput').keypress(function (event) {
            if (event.keyCode == 13) {
                $('#header1_ButtonTerm').attr('disabled', 'disabled'); <-- hack added to kill FORM POST
                eval($('#button1').attr('href'));
            }
        });

Upvotes: 0

Jacob Relkin
Jacob Relkin

Reputation: 163268

Write a small jQuery plugin:

jQuery.fn.enter = function(callback) {
   if(!callback) {
      //don't attach if we have garbage.
      return;
   }

   $(this).keydown(function(e) {
       var ev = e || event;
       if(ev.keyCode == 13) {
          callback();
          return false;
       }
   }); 
};

Usage: $(element).enter(callback_func);

I hope this helps.

Upvotes: 15

LittleTreeX
LittleTreeX

Reputation: 1239

I had a very similar question. However, I was unable to find a complete solution.

I simply wanted to attach the same function to 2 different elements, with 2 different methods of executing it. For example, what Tom wanted: CLICK a link, OR press ENTER in an input field, and execute the same function (ie navigate to another page).

Jacob Relkin has presented a good idea for the "enter" keypress. I have included this in the code below:

So based on the following simple markup:

<div>
  <label for="myInput">Type Stuff</label>
  <input id="myInput" type="text" value="" />
  <a id="myButton" href="http://google.com">Click me!</a>
</div>

Use this JavaScript (JQuery) code:

//this is the plugin Jacob Relkin suggested
(function($) {
$.fn.enter=function(callback){
    this.keyup(function(e) {
        var ev = e || event;
        if(ev.keyCode == 13) {
            callback();
            return false;
        }
    }); 
};
})(jQuery);

$(document).ready(function(){

    var fnDoStuff = function() {
        //insert code here
        //for this example I will complete Tom's task
        document.location.href = $("#myButton").attr('href');
    };

    $('#myInput').enter(fnDoStuff);
    $('#myButton').click(fnDoStuff);

 });

In this way, you could attach the same function to any number of elements, with any type of interaction.

Upvotes: 0

o.k.w
o.k.w

Reputation: 25810

Check this out: jQuery Event Keypress: Which key was pressed?

I'll just consolidate the codes from that post here:

$('#searchbox input').bind('keypress', function(e) {
 var code = e.keyCode || e.which;
 if(code == 13) { //Enter keycode
   //Do your stuff + form submit
 }
});

PS: I have never tested it, but it 'should' work. :P

Upvotes: 3

Shog9
Shog9

Reputation: 159628

You have a few major problems with this code...

The first one, pygorex1 caught: you need to specify the event argument if you wish to refer to it...

The second one is in the same area of your code: you're trying to check for the key event in a handler for the click event!

The third one can be found on this line:

            //click the button and go to next page
            $("#button1").click();

...which does nothing, since you have no event handlers on that link, and jQuery's click() function does not trigger the browser's default behavior!

Instead, try something like this:

// if a key is pressed and then released
$("#drivingSchoolInput").live("keyup", function(e) {

  // ...and it was the enter key...
  if(e.keyCode == 13) {

    // ...navigate to the associated URL.
    document.location = $("#button1").attr('href');
  }               
});

Upvotes: 2

leepowers
leepowers

Reputation: 38318

This line needs the e:

$("#drivingSchoolInput").live("click", function(e) {

Upvotes: 0

Related Questions