JavaScript and client side scripting.
Moderator: General Moderators
cjermain
Forum Newbie
Posts: 12 Joined: Wed Jun 01, 2005 6:11 pm
Post
by cjermain » Fri Jun 24, 2005 5:44 pm
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
Burrito
Spockulator
Posts: 4715 Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah
Post
by Burrito » Fri Jun 24, 2005 6:02 pm
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>
nigma
DevNet Resident
Posts: 1094 Joined: Sat Jan 25, 2003 1:49 am
Post
by nigma » Fri Jun 24, 2005 6:11 pm
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.
cjermain
Forum Newbie
Posts: 12 Joined: Wed Jun 01, 2005 6:11 pm
Post
by cjermain » Fri Jun 24, 2005 7:46 pm
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
Burrito
Spockulator
Posts: 4715 Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah
Post
by Burrito » Fri Jun 24, 2005 7:53 pm
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.
cjermain
Forum Newbie
Posts: 12 Joined: Wed Jun 01, 2005 6:11 pm
Post
by cjermain » Fri Jun 24, 2005 8:17 pm
I relized that I can simply change "block" to "inline" and there are no spacing problems.
-Colin J