How To Create Password Protect Using JavaScript

Submitted by alpha_luna on Wednesday, April 6, 2016 - 14:13.

Good Day!!!

In this tutorial, we are going to learn on How To Create Password Protect Using JavaScript. In the codes below provide a broad password to protect a certain page. Hope you can learn from this tutorial.

Password: nextpage

Directions:

First Step: Kindly save this image to your computer or you can change this whatever you want. Stop SignSecond Step: Copy this code below into the BODY tag of this starting page. (This is the starting page). 
  1. <script language="javascript">
  2.  
  3. var nifty_little_window = null;
  4. function passwordStopper() {
  5. nifty_little_window = window.open('home.html', 'theStopper',
  6. 'width=500,height=500,resizable=1');
  7. }
  8.  
  9. </script>
  1. <center>
  2. <div>
  3. <h3 class="blink_text">
  4. 	Click the image below, to login.
  5. </h3>
  6. </div>
  7.  
  8. <form>
  9. <img src="image/login.png" class="img_style" onClick="passwordStopper()">
  10. </form>
  11. </center>
Third Step: Copy this and kindly save it as a new page. Save it as home.html or you can change this name whatever you want. 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<title>
  5. 		Password Stopper
  6. 	</title>
  7.  
  8. <script language="JavaScript">
  9.  
  10. function Tryit() {
  11.   var location;
  12.   var password;
  13.   password=this.document.testingForm.testingTextBox.value
  14.   location=password + ".html"
  15.   fetch(location)
  16.   theStopper=window.close()
  17. }
  18.  
  19. function fetch(location) {
  20.   var root;
  21.   if (opener.closed) {
  22.     root=window.open('','thePasswordStopper','toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes,copyhistory=no');
  23.     root.location.href = location;
  24.   } else {
  25.     opener.location.href = location;
  26.   }
  27. }
  28.  
  29. </script>
  30.  
  31. 	<style type="text/css">
  32. 	</style>
  33. </head>
  34.  
  35. <body>
  36.  
  37. <img src="image/11.gif" width="150" height="150" style="margin-left:170px;">
  38.  
  39. <table border="1">
  40. <tr>
  41. 	<td><h2 style="text-align:center;">Stop!!! <br /> You'll need a password to go in the next page. <br /> To avoid scam.</h2></td>
  42. </tr>
  43. <tr>
  44. 	<td>
  45. 		<form name="testingForm" style="margin:auto; text-align:center;">
  46. 			<br />
  47. 			<input type="text" name="testingTextBox" autofocus='autofocus' style="font-size:18px; border-radius:4px; text-indent:5px;">
  48. 			<br />
  49. 			<br />
  50. 			<img src="image/button.png" width="150" height="75" onClick="Tryit(this.form)" style="cursor:pointer;">
  51. 		</form>
  52. 	</td>
  53. </tr>
  54. </table>
  55.  
  56. </body>
  57.  
  58. </html>
Fourth Step (last step): You're almost done. The above code will be the password protect before going to the final page. The password is nextpage and that would be the filename of our last page or you can change that later and in the below code, this is the last page. Save it as nextpage.html or you can make your own final page. 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<title>
  5. 		This is the next page.
  6. 	</title>
  7.  
  8. 	<style type="text/css">
  9. 	</style>
  10. </head>
  11.  
  12. <body>
  13.  
  14. <h1 style="text-align:center;">
  15. 	Welcome!!! You are not a scammer.
  16. </h1>
  17.  
  18. </body>
  19.  
  20. </html>
Note: This script can only protect pages that can end in a .html file or the extension name. You have to double check the extension name too.

Tags

Add new comment

About text formats
  • 168 views