When a user clicks Show link, display the password, hide it when clicked again
you weren't using document
on for getElementById
function toggle_password(target){
var d = document;
var tag = d.getElementById(target);
var tag2 = d.getElementById("showhide");
if (tag2.innerHTML == 'Show'){
tag.setAttribute('type', 'text');
tag2.innerHTML = 'Hide';
} else {
tag.setAttribute('type', 'password');
tag2.innerHTML = 'Show';
}
}
your id
names are illegal and difficult to work with: pwd'.$x.'
you can't have some of those chars.
The HTML 4.01 spec states that ID tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (-), underscores (_), colons (:), and periods (.).
also, this method will not work in all browsers, in IE < 9 for instance you can only change .type
before the element is attached to the document
try swapping them:
function swapInput(tag, type) {
var el = document.createElement('input');
el.id = tag.id;
el.type = type;
el.name = tag.name;
el.value = tag.value;
tag.parentNode.insertBefore(el, tag);
tag.parentNode.removeChild(tag);
}
function toggle_password(target){
var d = document;
var tag = d.getElementById(target);
var tag2 = d.getElementById("showhide");
if (tag2.innerHTML == 'Show'){
swapInput(tag, 'text');
tag2.innerHTML = 'Hide';
} else {
swapInput(tag, 'password');
tag2.innerHTML = 'Show';
}
}
hope this helps -ck
Here is an example using jQuery
(pastebin):
$(document).ready(function() {
$("#showHide").click(function() {
if ($(".password").attr("type") == "password") {
$(".password").attr("type", "text");
} else {
$(".password").attr("type", "password");
}
});
});
#showHide {
width: 15px;
height: 15px;
float: left;
}
#showHideLabel {
float: left;
padding-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>Password:</td>
<td>
<input type="password" name="password" class="password" size="25">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" id="showHide" />
<label for="showHide" id="showHideLabel">Show Password</label>
</td>
</tr>
</table>
Sources:
http://www.voidtricks.com/password-show-hide-checkbox-click/
How to align checkboxes and their labels consistently cross-browsers