Html Tips and Tricks

Friday, May 13, 2005

Javascript: Password Tips

If you want a page to be password protected, look at these html tips and tricks.

The first step is to find a web page that is password protected.
Mine is: http://htmlpassprotect.blogspot.com/

The second step is to find a web page that will be gone to if the visitor types in the wrong password.
I chose: http://htmltips.blogspot.com/
It may be better, however, to make a page that will say, for example, "YOUR PASSWORD IS INCORRECT. CLICK HERE TO TRY AGAIN. CLICK HERE TO GO BACK."

The third step is to insert the following code in between <head> and </head> on your password protected page:
<SCRIPT language="JavaScript">
<!--hide

var password;

var pass1="cool";

password=prompt('Please enter your password to view this page!',' ');

if (password==pass1)
alert('Password Correct! Click OK to enter!');
else
{
window.location="http://htmltips.blogspot.com";
}

//-->
</SCRIPT>


The four messages in italics show:
-The password
-The prompt that asks the visitor to type in the password
-The message that is displayed if a user types in the password correctly
-The address that the visitor goes to if they typed in the wrong password (This should probably be the site that you made in the second step)
Those four messages may be changed if you desire.

To make a link to the password protected page, simply use the <a> tag:
<a href="http://addressofthesitethatispasswordprotected.com>Click here to go to the password protected site</a>
That is what I have done here:
Click here to go to the password protected site
Note: Cool is the password for my password protected site.

Finally, to make multiple passwords possible, you will have to look at the original javascript which is on the password protected page:
<SCRIPT language="JavaScript">
<!--hide

var password;

var pass1="cool";

password=prompt('Please enter your password to view this page!',' ');

if (password==pass1)
alert('Password Correct! Click OK to enter!');
else
{
window.location="http://htmltips.blogspot.com";
}

//-->
</SCRIPT>

First, you will need to look at first text in italics.
var pass1="cool";
Change this to:
var pass1="cool";
var pass2="cool2";
var pass3="cool3";

...And then new passwords will be declared.
Make sure you change cool, cool2, and cool3 for your own passwords.
Finally, you need to look at the second text in italics:
password==pass1
That will need to be changed to, in this case:
password==pass1||pass2||pass3
That javascript literally says:
"if the password that the user entered is the same as password 1 or password 2 or password 3, then follow the instructions below"
If you were to make these changes to the password page, then the password page would accept cool2 and cool3 as a password also, in addition to cool.

To add more than 3 passwords, just add more of these:
var pass4="password"
...and make sure to change pass4 to another name each time you add it again to the code.
Adn edit the:
password==pass1
To include all your password names. (Seperate the password names by ||) (The password name in var pas10="cool10" is pas10)


NEED EXTRA HELP? HAVE A SUGGESTION? HAVE SOMETHING TO ADD? PLEASE POST COMMENTS WHILE LOOKING AT ALL THESE USEFUL HTML TIPS AND TRICKS. THANK YOU!

28 Comments:

Post a Comment

<< Home


Hit Counter