Page 1 of 1
Javascript: Showing and Hiding a Password
Posted: Fri Jun 24, 2005 5:44 pm
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="e;Javascript"e; type="e;text/javascript"e;>
function showpass(check) {
if (check.checked) {
document.formApprove.pass.type="e;text"e;
} else {
document.formApprove.pass.type="e;password"e;
}
}
</script>
</head>
<body>
<form name="e;formApprove"e;>
Password: <input type="e;password"e; name="e;pass"e; value="e;test"e;> <input type="e;checkbox"e; name="e;show"e; value="e;yes"e; onChange="e;showpass(this)"e;> Show
<br />
<br />
<input type="e;submit"e; value="e;Submit"e;>
</form>
</body>
</html>
So far it doesnt seem to do anything. Any ideas? Is there a better way to do this?
Thanks!
-Colin J
Posted: Fri Jun 24, 2005 6:02 pm
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="e;Javascript"e; type="e;text/javascript"e;>
function showpass(check){
if (check.checked) {
document.getElementById("e;pass"e;).style.display = "e;none"e;;
document.getElementById("e;shows"e;).style.display = "e;block"e;;
} else {
document.getElementById("e;pass"e;).style.display = "e;block"e;;
document.getElementById("e;shows"e;).style.display = "e;none"e;;
}
}
</script>
</head>
<body>
<form name="e;formApprove"e;>Password:<br>
<input type="e;text"e; name="e;shows"e; id="e;shows"e; style="e;display:none"e; readonly="e;readonly"e;><br>
<input type="e;password"e; name="e;pass"e; id="e;pass"e; onKeyup="e;document.getElementById('shows').value = this.value"e;><br>
<input type="e;checkbox"e; name="e;show"e; value="e;yes"e; onClick="e;showpass(this)"e;>
Show<br /><br /><input type="e;submit"e; value="e;Submit"e;></form>
</body>
</html>
Posted: Fri Jun 24, 2005 6:11 pm
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.
Posted: Fri Jun 24, 2005 7:46 pm
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="e;Javascript"e; type="e;text/javascript"e;>
function showpass(check){
if (check.checked) {
document.getElementById("e;pass"e;).style.display = "e;none"e;;
document.getElementById("e;shows"e;).style.display = "e;block"e;;
} else {
document.getElementById("e;pass"e;).style.display = "e;block"e;;
document.getElementById("e;shows"e;).style.display = "e;none"e;;
}
}
</script>
</head>
<body>
<form name="e;formApprove"e;>
Password:
<input type="e;text"e; name="e;shows"e; id="e;shows"e; style="e;display:none"e;>
<input type="e;password"e; name="e;pass"e; id="e;pass"e; onKeyup="e;document.getElementById('shows').value = this.value"e;>
<input type="e;checkbox"e; name="e;show"e; value="e;yes"e; onClick="e;showpass(this)"e;> Show
<br />
<br />
<input type="e;submit"e; value="e;Submit"e;>
</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
Posted: Fri Jun 24, 2005 7:53 pm
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.
Posted: Fri Jun 24, 2005 8:17 pm
by cjermain
I relized that I can simply change "block" to "inline" and there are no spacing problems.
-Colin J