PDA

View Full Version : toggling between Password and Text input field: possible?

BrightNail
01-31-2003, 02:03 AM
hey all,
just curious...

I have a input box that is defaulted to text...
on some occasions, there will be some name/value pairs in the url string. IF a certain name exists in the url, I want to make the input box PASSWORD..so that the stars show up...is this possible...to toggle between text/password input????

so, if the url does not contain that certain name/value pair, then its a text box...if it does contain that name/value pair, its a password box......?????

any ideas..

brightnail
glenngv
01-31-2003, 04:03 AM
type attribute in <input> elements is read-only, which is logical.

when do you want to toggle the field? as the page loads or after the page has loaded?
BrightNail
01-31-2003, 05:48 AM
actually, I wanted to toggle at will.....as it loads and after it has rendered......basically, to be able to apply a input name at will..either password or text..

since I didn't have much time...what I did was basically the following...

if(document.URL.indexOf('astring') != -1 ){
document.write('write out input with password type')
}else{
document.write('write out input with text type')
}

a simple solution which I already knew....I just wanted to use a more clever solution..but alas, I didn't...:-)
glenngv
01-31-2003, 10:18 AM
you can't change the type attribute.
Modifying it would mean not only changing it from 'text' to 'password' but also to 'checkbox' and 'radio'.
Imagine the browser re-rendering an existing control to a different one! :D

The workaround is to toggle showing/hiding of text and password fields appropriately:


<html>
<head>
<title>Toggle Input Type</title>
<script language="javascript">
function toggle(objChk){
if (objChk.checked){
objChk.form.txtField1.style.display="none";
objChk.form.txtField2.style.display="inline";
objChk.form.txtField2.value=objChk.form.txtField1.value;
}
else {
objChk.form.txtField1.style.display="inline";
objChk.form.txtField2.style.display="none";
objChk.form.txtField1.value=objChk.form.txtField2.value;
}
}
</script>
</head>
<body>
<form>
<script language="javascript">
<!--
if(location.href.indexOf('astring') != -1 ) { //password
document.write('<input type="text" name="txtField1" style="display:none;width:150px"><input type="password" name="txtField2" style="display:inline;width:150px">');
}
else { //text
document.write('<input type="text" name="txtField1" style="display:inline;width:150px"><input type="password" name="txtField2" style="display:none;width:150px">');
}
//-->
</script>
<input type="checkbox" onclick="toggle(this)">Password
</form>
</body>
</html>