How To Create Login Form Using JavaScript - Part II
Submitted by alpha_luna on Friday, April 8, 2016 - 11:19.
Related source code: How To Create Login Form Using JavaScript
This is an alteration of the last tutorial in the title of How To Create Login Form Using JavaScript that the users will proceed to the next URL if they type their username and password precisely.
The changes of this tutorial, the users has given a chance to type their username and password precisely. And, they're only 3 chances. But, you can edit after you download the source code if you want more chances to be given to the users.
Example Username and Password
Username: User_1
Password: Password_1
To change the username and password information. This is the script.
Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial. For more updates, don’t hesitate and feel free to visit our website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you.
- var usernameArray = ["User_1", "User_2", "User_3", "User_4"];
- var passwordArray = ["Password_1", "Password_2", "Password_3", "Password_4"];
Directions:
Kindly insert this code below into the BODY tag of your Login Form.- <script type = "text/javascript">
- var count = 2;
- function tryToLogin() {
- var un = document.loginPage.userName.value;
- var pw = document.loginPage.passWord.value;
- var valid = false;
- var usernameArray = ["User_1", "User_2", "User_3", "User_4"];
- var passwordArray = ["Password_1", "Password_2", "Password_3", "Password_4"];
- for (var i=0; i <usernameArray.length; i++) {
- if ((un == usernameArray[i]) && (pw == passwordArray[i])) {
- valid = true;
- break;
- }
- }
- if (valid) {
- alert ("Login Successfully");
- window.location = "next.html";
- return false;
- }
- var t = " chances";
- if (count == 1) {t = " chance"}
- if (count >= 1) {
- alert ("Invalid userName or passWord. You have " + count + t + " to correct your details.");
- document.loginPage.userName.value = "";
- document.loginPage.passWord.value = "";
- setTimeout("document.loginPage.userName.focus()", 25);
- setTimeout("document.loginPage.userName.select()", 25);
- count --;
- }
- else {
- alert ("Wrong Detail! You have no more chances to be given!");
- document.loginPage.userName.value = "No more chances to be given.!";
- document.loginPage.passWord.value = "";
- document.loginPage.userName.disabled = true;
- document.loginPage.passWord.disabled = true;
- return false;
- }
- }
- </script>
- <center>
- <form name="loginPage">
- <table cellpadding="5" cellspacing="5">
- <tr>
- <td colspan="3">
- <h1 style="text-align:center;">
- Login
- </h1>
- </td>
- </tr>
- <tr>
- <td>
- </td>
- <td width="10">
- </td>
- <td>
- <input type="text" name="userName" autofocus="autofocus" style="font-size:18px; text-indent:5px;" placeholder="Enter your Username">
- </td>
- </tr>
- <tr>
- <td>
- </td>
- <td width="10">
- </td>
- <td>
- <input type="password" name="passWord" autofocus="autofocus" style="font-size:18px; text-indent:5px;" placeholder="Enter your Password">
- </td>
- </tr>
- <tr>
- <td colspan="3" style="text-align:center;">
- <br />
- <input type="button" value="Login" onclick= "tryToLogin()" name="Submit" style="margin-right:20px; border-radius:4px; background-color:skyblue; font-size:18px; cursor:pointer;">
- <input type="reset" value="Reset" style="font-size:18px; cursor:pointer; border-radius:4px; background-color:orange;">
- <br />
- <br />
- </td>
- </tr>
- </table>
- </form>
- </center>
Add new comment
- 93 views