Trying to add a keydown event to a function
Question
I have been trying to add a keydown event to this function so that it not only submits the form when SUBMIT is clicked, but also when ENTER is pressed. My code and the code I want to add are below. I have tried to get the two to work together, but I'm confused about how to add the second code block. Oh, and validate() is being called from the HTML submit button element in the HTML file. Do I need to remove it from the HTML and create a brand new function that will perform both actions?
Can anyone help, please and thank you?
Here is my code:
function validate() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username == "abc" && password == "123") {
window.location = "http://www.google.com";
return false;
} else {
alert("The user name or password is invalid.");
}
}
and here is the code I want to add:
function (event) {
if (event.which == 13 || event.keyCode == 13) {
//code to execute here
return false;
}
return true;
};
2 answers
solution1
0 2015-08-12 17:32:44
In my opinion you should add event to body then validate it.
try this:
document.getElementById('body').addEventListener('keypress', function(e) {
if (event.which == 13 || event.keyCode == 13) {
/* validate your form here and submit your form */
document.forms[0].submit();
return false;
}
return true;
});
solution2
0 2015-08-12 19:25:36
After some more research, I found this link http://jsfiddle.net/Jaganathan/6AWkH/2/ and from there, figured out a workable solution for what I needed.
The code I ended up using is below. I hope it will help someone else, too.
$(function() { $('body').keypress(function(event) { var username = document.getElementById("username").value; var password = document.getElementById("password").value; if (event.which == 13) { if (username == "abc" && password == "123") { window.location = "/Sites/IRAnalystDay2015/homepage/index.htm"; //redirecting to other page return false; } else { alert( "The user name or password is invalid." ); } } }); $("#submit").click(function() { var username = document.getElementById("username").value; var password = document.getElementById("password").value; var e = jQuery.Event('keypress'); e.which = 13; // #13 = Enter key if (username == "abc" && password == "123") { window.location = "/Sites/IRAnalystDay2015/homepage/index.htm"; //redirecting to other page return false; } else { alert("The user name or password is invalid."); } }); });
<html> <head> <title>Javascript Login Form Validation</title> <!-- include css file here--> <link rel="stylesheet" href="css/style.css"/> <!-- include javascript file here--> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="js/login.js"></script> </head> <body> <div class="container"> <div class="main"> <form id="form_id" method="post" name="myform"> <label>User Name :</label></br> <input type="text" name="username" id="username"/></br> <label>Password :</label></br> <input type="password" name="password" id="password"/></br> <input type="button" value="Login" id="submit" /> </form> </div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.