On Enter fire javascript function

Question

After reading this post here in Stackoverflow, (Detect the Enter key in an text input field) I tried to make a few of my inputs fire on enter... I did not work. I made a simple example and it still doesn't work. Can someone hint as to the proper way? (FYI - Definitely a newbie here)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>On Enter</title>

<script src="../../Scripts/jquery-2.1.0.min.js"></script> 
<script>
        $(".input1").keyup(function (e) {
            if (e.keyCode == 13) {
                alert ("It Works");
            }
        });
</script>

</head>

<body>


        <input type="text"
            id="input1"
            placeholder="Press Enter When Done">
        </input>


</body>
</html>

Thanks

Your code must be AFTER the HTML so the DOM is available when it runs. Or, you can use `$(document).ready(...) to wait for the DOM to be ready. — jfriend00, Nov 25 '14 at 21:21
Duplicate, check this http://stackoverflow.com/questions/20998541/get-the-value-of-input-text-when-enter-key-pressed — Thomas Helms, Nov 25 '14 at 21:24

Spencer Wieczorek · Accepted Answer · 2014-11-25T21:57:37.610

6

First you need to say #input1 other than .input1, then run it when the entire DOM is ready:

$(document).ready(function(){
    $("#input1").keyup(function (e) {
        if (e.keyCode == 13) {
            alert ("It Works");
        }
    });
});

Edit: As @jfriend00 mentioned in a comment it's a good idea to use e.which other than e.keycode. To do so you can change: e.keyCode == 13 to e.which == 13. This way is recommenced by the people at jQuery, as it normalizes e.keyCode and e.charCode.

edited Nov 25 '14 at 21:57

answered Nov 25 '14 at 21:23

Spencer Wieczorek

21,229
7
44
54

1

The only complete answer so far that fixes BOTH problems in the OP's code to make it actually work. I think you actually may want to use [`e.which`](http://api.jquery.com/event.which/) instead of `e.keyCode` to take advantage of jQuery's event normalization among different browsers. – jfriend00 Nov 25 '14 at 21:41
Thank you for your comments and tutorial. I am still learning and concise answer/tutorials are great. Thanks everyone. – gamh00 Nov 26 '14 at 11:35

score 5 · Answer 2 · edited Nov 25 '14 at 21:28

5

Change the .input1 in your JS to #input1

When you use . it means it's a class, but you have an ID, which is #.

edited Nov 25 '14 at 21:28

Spencer Wieczorek

21,229
7
44
54

answered Nov 25 '14 at 21:20

Alexus

942
7
20

1

The code is running before the DOM is parsed. This fix is not sufficient. – jfriend00 Nov 25 '14 at 21:21
@Soren Although what you said in the edit is correct, it was never intended by the author of this post. Which is why I rolled back your edit. – Spencer Wieczorek Nov 25 '14 at 21:32
@SpencerWieczorek -- did you not think it improved the answer? What the original author intended is actually irrelevant, and what is important is to improve the site answers -- you could have done that as well instead of adding a new answer. – Soren Nov 25 '14 at 21:34
@Soren [Refer to this question](http://meta.stackexchange.com/questions/11474/what-is-the-etiquette-for-modifying-posts), I understand that you want to make this answer better. And yes I agree it does improve the post. Although it changes the meaning of the post. Edits are to make things cleaner and easier to understand, not to append more information to. Also note I was still typing on my answer before I saw this post. What if I removed the entire answer from the author and gave a new one in an edit because I think it improved the post? I'm sure the author would not like that. – Spencer Wieczorek Nov 25 '14 at 21:49

score 1 · Answer 3 · answered Nov 25 '14 at 21:23

1

Your code is triggering a "class", not an "id", so add a "#" instead of a "." in input1:

       $("#input1").keyup(function (e) {
            if (e.keyCode == 13) {
                alert ("It Works");
            }
        });

answered Nov 25 '14 at 21:23

fictus

286
2
5

score 0 · Answer 4 · answered Nov 25 '14 at 21:23

first, like the previous answer your criteria is not good. change for ID second, put your javascript at the and of the file on in the ready document. Because the javascript is in execution while the documenta as not finish to load . So the event can't be add to an element that doesnt exist.

On Enter fire javascript function

4 Answers4