How to get the button to work on keyboard Enter?

Question

I'm trying to get the button to work without clicking on it.

I tried but with using 'Submit' and 'button', neither works unless user clicks the button.

 <input id="txtDusNumber" class="form-control form-control-sm" type="text" />
 <input type="submit" name="submit" class="btn " value="Search" id="enter-btn" onclick="ShowCard()" />
 <input type="button" class="btn " value="Search" onclick="ShowCard()" />


<script>
function ShowCard() {
        var dusNumberVal = $('#txtDusNumber').val();
        if (dusNumberVal) {
                $.ajax({
                        url: "@Url.Action("display","Card")",
                        data: { number: dusNumberVal },
                        type: 'GET',
                        success: function (result) {
                                $('#results').html(result);
                        },
                        error: function () {
                                alert("error...");
                        }
                });
        } else {
                alert('Please enter  Number.');
        }
}
</script>

Possible duplicate of [Jquery: how to trigger click event on pressing enter key](https://stackoverflow.com/questions/18160342/jquery-how-to-trigger-click-event-on-pressing-enter-key) — Nikhil Kinkar, Dec 14 '18 at 22:17

score 2 · Accepted Answer · answered Dec 14 '18 at 22:25

2

Try this:

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


function ShowCard(){
...
}

What it does is when the page is loaded, once you press enter, the ShowCard function gets executed.

answered Dec 14 '18 at 22:25

Falcon

837
1
9
28

score 1 · Answer 2 · answered Dec 14 '18 at 22:30

1

Wrap <button type="submit"> in <form> tag

answered Dec 14 '18 at 22:30

colorswall

188
1
4

1

That would work as well but only if you have the focus on the input type – Falcon Dec 14 '18 at 22:31

How to get the button to work on keyboard Enter?

2 Answers2