How do I combine the on click event & the keydown of the enterkey?

Question

I have a small quiz and am trying to get it so that after a user enters their answer, they can click submit button or press the enter key on their keyboard. I have tried using a callback function to capture both instances.

        <form>
            <input id="answer"></input>
            <button id="btn" class="submit">SUBMIT</button>
        </form>

        var callback = function() {
            var myAnswer = document.getElementById('answer').value;
            if (myAnswer == "y" || myAnswer == "Y" ) {
                $('.content-bd').html("<p>Well done!<p>");
            }
            else {
                $('.content-bd').html("<p>Try again<p>");
            }
        };

        $("input").keypress(function() {
            if (event.which == 13) callback();
        });

        $('#btn').click(callback);

Possible duplicate of [Submitting a form on 'Enter' with jQuery?](https://stackoverflow.com/questions/699065/submitting-a-form-on-enter-with-jquery) — Vishnu Bhadoriya, Mar 24 '18 at 11:24

score 3 · Answer 1 · answered Mar 24 '18 at 11:21

3

You are missing to collect the event.

$("input").keypress(function(event) {
    if (event.which == 13) callback();
});

answered Mar 24 '18 at 11:21

deEr.

357
3
12

score 2 · Answer 2 · answered Mar 24 '18 at 11:23

There are at least four problems:

The default type of a button is submit, so clicking that button will submit the form (and refresh the page). If you don't want that, add type="button" to the button.
input tags are void tags, you never write </input>
As AjAX. says, you've forgotten to declare the event parameter in your keypress callback, so you're relying on the global event, which doesn't exist on Firefox. (It would work on Chrome or IE.)
Some browsers submit the form if it has a single input and the user presses Enter. If you don't want that to happen, prevent form submission.

So:

var callback = function() {
    var myAnswer = document.getElementById('answer').value;
    if (myAnswer == "y" || myAnswer == "Y" ) {
        $('.content-bd').html("<p>Well done!<p>");
    }
    else {
        $('.content-bd').html("<p>Try again<p>");
    }
};

$("input").keypress(function(event) {
    if (event.which == 13) callback();
});

$('#btn').click(callback);

$("form").submit(false);

<form>
    <input id="answer" type="text">
    <button type="button" id="btn" class="submit">SUBMIT</button>
</form>
<div class="content-bd"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Shubham Agarwal Bhewanewala · Answer 3 · 2018-03-24T11:25:19.720

0

Its keydown function not keypress along with passing event.

<input type="text" id="txt"/>

$('#txt').keydown(function (e){
    if(e.keyCode == 13){
        alert('you pressed enter ^_^');
    }
})

edited Mar 24 '18 at 11:25

answered Mar 24 '18 at 11:22

Shubham Agarwal Bhewanewala

1,119
1
8
20

score 0 · Answer 4 · answered Mar 24 '18 at 11:25

What I actually prefer to do is register even on the wrapping form. This way uses can interact with the page as they normally would have.

$('form').submit(function (e) {
    e.preventDefault();

    ...
});

This way user can both press one of the submit buttons or hit enter while input fields are focused.

e.preventDefault() is used to prevent browser from actually submitting the form, which would cause page to be refreshed.

Another benefit of this approach is that, in future, if form is changed and new fields/submit buttons are added, event will still e handled properly.

Cheers.

How do I combine the on click event & the keydown of the enterkey?

4 Answers4