how can i toggle a password field to text and password with a checkbox check uncheck
A:
Use the onChange event when ticking the checkbox and then toggle the input's type to text/password.
Example:
<input type="checkbox" onchange="tick(this)" />
<input type="input" type="text" id="input" />
<script>
function tick(el) {
$('#input').attr('type',el.checked ? 'text' : 'password');
}
</script>
watain
2009-12-28 18:21:56
A:
I believe you can call
$('#inputField').attr('type','text');
and
$('#inputField').attr('type','password');
depending on the checkbox state.
KingErroneous
2009-12-28 18:23:16
not possible in IE, considering IE's only-set-it-once rule for the type attribute of input elements. not a jQuery bug
Anwar Chandra
2009-12-28 18:44:36
A:
I have the following in production. It clones a new field having the toggled type.
toggle_clear_password = function( fields ) {
// handles a list of fields, or just one of course
fields.each(function(){
var orig_field = $(this);
var new_field = $(document.createElement('input')).attr({
name: orig_field.attr('name'),
id: orig_field.attr('id'),
value: orig_field.val(),
type: (orig_field.attr('type') == 'text'? 'password' : 'text')
})
new_field.copyEvents(orig_field); // jquery 'copyEvents' plugin
orig_field.removeAttr('name'); // name clashes on a form cause funky submit-behaviour
orig_field.before(new_field);
orig_field.remove();
});
}
JQuery doesn't just let you take the type attribute and change it, at least not the last time I tried.
Derek Illchuk
2009-12-28 18:24:39
A:
Toggle the checkbox's focus event and determain the checkbox's status and update the field as nesscarry
$box = $('input[name=checkboxName]');
$box.focus(function(){
if ($(this).is(':checked')) {
$('input[name=PasswordInput]').attr('type', 'password');
} else {
$('input[name=PasswordInput]').attr('type', 'text');
}
})
nwhiting
2009-12-28 18:26:09
+1
A:
updated: live example here
changing type with $('#blahinput').attr('type','othertype') is not possible in IE, considering IE's only-set-it-once rule for the type attribute of input elements.
you need to remove text input and add password input, vice versa.
$(function(){
$("#show").click(function(){
if( $("#show:checked").length > 0 ){
var pswd = $("#txtpassword").val();
$("#txtpassword").attr("id","txtpassword2");
$("#txtpassword2").after( $("<input id='txtpassword' type='text'>") );
$("#txtpassword2").remove();
$("#txtpassword").val( pswd );
}
else{ // vice versa
var pswd = $("#txtpassword").val();
$("#txtpassword").attr("id","txtpassword2");
$("#txtpassword2").after( $("<input id='txtpassword' type='password'>") );
$("#txtpassword2").remove();
$("#txtpassword").val( pswd );
}
});
})
live example here
Anwar Chandra
2009-12-28 18:33:33
+3
A:
is this what you looking for ??
<html>
<head>
<script>
function changeType()
{
document.myform.txt.type=(document.myform.option.value=(document.myform.option.value==1)?'-1':'1')=='1'?'text':'password';
}
</script>
</head>
<body>
<form name="myform">
<input type="text" name="txt" />
<input type="checkbox" name="option" value='1' onchange="changeType()" />
</form>
</body>
</html>
Michel Kogan
2009-12-28 18:45:14
A:
<html>
<head>
<script>
$(function(){
$("#changePass").click(function(){
if ($("#txttext").hasClass("hide")){
$("#txttext").val( $("#txtpass").val() ).removeClass("hide");
$("#txtpass").addClass("hide");
} else if ($("#txtpass").hasClass("hide")){
$("#txtpass").val( $("#txttext").val() ).removeClass("hide");
$("#txttext").addClass("hide");
}
});
});
</script>
<style>
.hide{display:none;}
</style>
</head>
<body>
<form id="myform">
<input type="text" id="txtpass" type='password'/>
<input class="hide" type="text" id="txttext" type='text'/>
<button id="changePass">change</button>
</form>
</body>
</html>
andres descalzo
2009-12-28 19:08:03