Trigger Submit Button By Pressing Enter Key in JavaScript And JQuery

Usually, the HTML forms are submitted by pressing the button manually. But JavaScript and jQuery both have the capability to submit a form by pressing the Enter key using the keyCode property.

In some cases, we have to use both, the button click and press enter key for submitting the form. So for doing this we use the JavaScript keyCode property which helps to track the keyboard buttons by their unique code.

Trigger Submit Button By Pressing Enter Key in JavaScript

Here are 4 steps to Trigger Submit Button By Pressing Enter Key in JavaScript,

Create a button with the HTML ID attribute.
By executing the JavaScript keyup function with addEventListener, we check whether the button is clicked or not.
After that, by using the keyCode of entering the key we are able to check which button is clicked by the user.
In the last step, if keyCode is for Enter key we hit the submit button by JavaScript click() function.

<input id="text" type="text" placeholder="Enter your name…">
<button id="submit">Hit Enter</button>

<script>
document.getElementById("text")
    .addEventListener("keyup", function(e) {
        if (e.keyCode === 13) {
            document.getElementById("submit").click();
        }
    });
 
document.getElementById("submit").onclick = function() {
    alert('You clicked an enter key!');
}
</script>

<button id="submit">Hit Enter</button>

document.getElementById("text")

.addEventListener("keyup", function(e) {

if (e.keyCode === 13) {

document.getElementById("submit").click();

}

});

document.getElementById("submit").onclick = function() {

alert('You clicked an enter key!');

}

</script>

Live Example of Press Enter Key Programmatically in JavaScript

See the Pen by Bikash Panda (@phpcodertech) on CodePen.

Trigger Submit Button By Pressing Enter Key in jQuery

In the below code, we perform some basic steps to trigger submit button by using jQuery,

First, we create an HTML input with the submit button.
Then we check keys on the input field by using textbox ID and jQuery keyup function.
Then by using the keyCode of ENTER key we check which button is hit by the user.
Then at the last, we hit the button at that condition.

Complete source code with trigger button using jQuery,

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<input id="text" type="text" placeholder="Enter your name…">
<button id="submit">Hit Enter</button>

<script>
$(document).ready(function() {
    $("#text").keyup(function(event) {
        if (event.which === 13) {
            $("#submit").click();
        }
    });
 
    $("#submit").click(function() {
        alert('You clicked an enter button!');
    })
});
</script>

<button id="submit">Hit Enter</button>

$(document).ready(function() {

$("#text").keyup(function(event) {

if (event.which === 13) {

$("#submit").click();

}

});

$("#submit").click(function() {

alert('You clicked an enter button!');

})

});

</script>

Live view of trigger submit button by ENTER button in jQuery

See the Pen Trigger Submit Button by Pressing Enter Key in JQuery by Bikash Panda (@phpcodertech) on CodePen.

Above is the complete explanation and source code to trigger submit button by pressing the keyboard ENTER button using JavaScript and jQuery.

If you got any issues please comment below.

You can also check all the JavaScript key codes here https://keycode.info/.

Trigger Submit Button By Pressing Enter Key in JavaScript And JQuery

Trigger Submit Button By Pressing Enter Key in JavaScript

Live Example of Press Enter Key Programmatically in JavaScript

Trigger Submit Button By Pressing Enter Key in jQuery

Live view of trigger submit button by ENTER button in jQuery

Also Read:

By Bikash

Related Post

3 thoughts on “Trigger Submit Button By Pressing Enter Key in JavaScript And JQuery”

Leave a Reply Cancel reply

You Missed

5 Most Effective Ways To Optimize PHP Code

Debugging in PHP: A Comprehensive Guide with Examples

3 popular ways to make HTTP requests in JavaScript

PHP: Logout From All Devices on Password Change