Javascript: Showing and Hiding a Password

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
cjermain
Forum Newbie
Posts: 12
Joined: Wed Jun 01, 2005 6:11 pm

Javascript: Showing and Hiding a Password

Post by cjermain »

Hey,
For one of my pages I want the user to be able to show and hide the password, depending on whether a checkbox has been checked.

This is what I came up with:

Code: Select all

<html>

<head>
<title>Pass Test</title>
<script language=&quote;Javascript&quote; type=&quote;text/javascript&quote;>
function showpass(check) {
	if (check.checked) {
	document.formApprove.pass.type=&quote;text&quote;
	} else {
	document.formApprove.pass.type=&quote;password&quote;
	}
}
</script>
</head>

<body>

<form name=&quote;formApprove&quote;>
Password: <input type=&quote;password&quote; name=&quote;pass&quote; value=&quote;test&quote;> <input type=&quote;checkbox&quote; name=&quote;show&quote; value=&quote;yes&quote; onChange=&quote;showpass(this)&quote;> Show
<br />
<br />
<input type=&quote;submit&quote; value=&quote;Submit&quote;>
</form>

</body>

</html>
So far it doesnt seem to do anything. Any ideas? Is there a better way to do this?

Thanks!

-Colin J
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

for starters you need to use onClick for checkboxes, not onChange.

regardless of that fact, I don't think "type" is a property you can change for form elements....could be wrong, but I don't think so:

you could just create two boxes and when something is typed in the password box, it gets put into the text box as well, then use the checkbox to toggle between which one is visible.

ex:

Code: Select all

<html> 
<head>
<title>Pass Test</title>
<script language=&quote;Javascript&quote; type=&quote;text/javascript&quote;>
function showpass(check){	
	if (check.checked) {
		document.getElementById(&quote;pass&quote;).style.display = &quote;none&quote;;
		document.getElementById(&quote;shows&quote;).style.display = &quote;block&quote;;
	} else {	
		document.getElementById(&quote;pass&quote;).style.display = &quote;block&quote;;
		document.getElementById(&quote;shows&quote;).style.display = &quote;none&quote;;
	}
}
</script>
</head> 
<body> 
<form name=&quote;formApprove&quote;>Password:<br>
<input type=&quote;text&quote; name=&quote;shows&quote; id=&quote;shows&quote; style=&quote;display:none&quote; readonly=&quote;readonly&quote;><br>
<input type=&quote;password&quote; name=&quote;pass&quote; id=&quote;pass&quote; onKeyup=&quote;document.getElementById('shows').value = this.value&quote;><br>
<input type=&quote;checkbox&quote; name=&quote;show&quote; value=&quote;yes&quote; onClick=&quote;showpass(this)&quote;> 
Show<br /><br /><input type=&quote;submit&quote; value=&quote;Submit&quote;></form> 
</body> 
</html>
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Post by nigma »

Burrito wrote:I don't think "type" is a property you can change for form elements....could be wrong
Nope. Right on target: http://www.w3schools.com/htmldom/dom_obj_form.asp

Cjermain, W3Schools will be very useful if you plan on using javascript/vbscript to manipulate dom elements.
User avatar
cjermain
Forum Newbie
Posts: 12
Joined: Wed Jun 01, 2005 6:11 pm

Post by cjermain »

Burrito...when I executed the code that you posted (PS: I took out the line breaks that I had not made for looks), typing in the password works fine and it looks fine, however when I check the show box, the input field moves down a line. I dont understand why this is.

Code: Select all

<html>

<head>
<title>Pass Test</title>
<script language=&quote;Javascript&quote; type=&quote;text/javascript&quote;>
function showpass(check){
	if (check.checked) {
	document.getElementById(&quote;pass&quote;).style.display = &quote;none&quote;;
	document.getElementById(&quote;shows&quote;).style.display = &quote;block&quote;;
	} else {			
	document.getElementById(&quote;pass&quote;).style.display = &quote;block&quote;;
	document.getElementById(&quote;shows&quote;).style.display = &quote;none&quote;;
	}
}
</script>
</head>

<body>

<form name=&quote;formApprove&quote;>
Password:
<input type=&quote;text&quote; name=&quote;shows&quote; id=&quote;shows&quote; style=&quote;display:none&quote;>
<input type=&quote;password&quote; name=&quote;pass&quote; id=&quote;pass&quote; onKeyup=&quote;document.getElementById('shows').value = this.value&quote;>
<input type=&quote;checkbox&quote; name=&quote;show&quote; value=&quote;yes&quote; onClick=&quote;showpass(this)&quote;> Show
<br />
<br />
<input type=&quote;submit&quote; value=&quote;Submit&quote;>
</form>

</body>

</html>
The only code that I modified was the <br> tags because I didnt want to have the spacing. Do you have any idea why this is?

Nigma... Thanks for the link, I will have to get more familiar DOM objects.

Thanks!

-Colin J
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

well I'm just hiding and showing the form elements themselves, they must keep some placeholder thereby bumping the other up or down.

in practice, you should uses span elements to make it transparent to the end user and just put the form fields inside of them then hide or show the span.
User avatar
cjermain
Forum Newbie
Posts: 12
Joined: Wed Jun 01, 2005 6:11 pm

Post by cjermain »

I relized that I can simply change "block" to "inline" and there are no spacing problems.

-Colin J
Post Reply