Trigger a button click with JavaScript on the Enter key in a text box

by

In jQuery, the following would work:

$("#id_of_textbox").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#id_of_button").click();
    }
});


$("#pw").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#myButton").click();
    }
});

$("#myButton").click(function() {
  alert("Button code executed.");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton">Submit</button>

Or in plain JavaScript, the following would work:

document.getElementById("id_of_textbox")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("id_of_button").click();
    }
});


document.getElementById("pw")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("myButton").click();
    }
});

function buttonCode()
{
  alert("Button code executed.");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton" onclick="buttonCode()">Submit</button>

More Related Contents:

  1. var functionName = function() {} vs function functionName() {}
  2. A button that will add a textbox below another textbox?
  3. Dynamically set property of nested object
  4. “Uncaught TypeError: Illegal invocation” in Chrome
  5. Angular 2: Two backend service calls on success of first service
  6. How can I pause setInterval() functions?
  7. Does Javascript have something like Ruby’s method_missing feature?
  8. Regular expression for IP Address Validation
  9. Generating unique random numbers (integers) between 0 and ‘x’
  10. Using Objects in For Of Loops
  11. flow 2 columns of text automatically with CSS
  12. What is the cause for “angular is not defined”
  13. Is it possible to initiate a download prompt in the browser for recognized MIME types using only JavaScript (client-side approach)?
  14. how to assign javascript variable value to php variable
  15. How to give a Blob uploaded as FormData a file name?
  16. RequireJS: How to define modules that contain a single “class”?
  17. Javascript: do an action after user is done scrolling
  18. HTML Canvas: How to draw a flipped/mirrored image?
  19. Detect which form input has focus using JavaScript or jQuery
  20. Is there an onload event for input elements?
  21. Create an Image of a DIV in JavaScript (GIF/PNG)
  22. Error “Error: A is only ever to be used as the child of element”
  23. What is the correct way to write HTML using Javascript?
  24. Can’t call setState on a component that is not yet mounted
  25. Javascript date parsing on Iphone
  26. SVG donut slice as path element (annular sector)
  27. Three.js add an object to a group but keep global position/rotation/scale as it was
  28. Why does .then() chained to Promise.resolve() allow const declaration to be reassigned?
  29. Angular controller scope not updating after jQuery ajax call
  30. How can I compare two color values in jQuery/JavaScript?

Leave a Comment