Changing Password Field To Text With Checkbox With JQuery

July 14, 2022 Post a Comment

How can I toggle a password field to text and password with a checkbox check uncheck?

Solution 1:

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>

Solution 2:

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>

Solution 3:

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

Baca Juga

Solution 4:

You can use some thing like this

$("#showHide").click(function () {
                if ($(".password").attr("type")=="password") {
                    $(".password").attr("type", "text");
                }
                else{
                    $(".password").attr("type", "password");
                }

    });

visit here for more http://voidtricks.com/password-show-hide-checkbox-click/

Solution 5:

I believe you can call

$('#inputField').attr('type','text');

and

$('#inputField').attr('type','password');

depending on the checkbox state.

JavaScript Passion