Toggle multiple password inputs with single checkbox

Asked 11/2, 2013 at 16:8 Answered 1/3, 2013 at 21:43

Solved html css forms checkbox radio-button

Ok What Im trying to do is toggle 3 password input boxes with one checkbox... on clicking the checkbox I would like all 3 passwords to be revealed within there input boxes. Is there anyway to adapt this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!--
  Created using jsbin.com
  Source can be edited via http://jsbin.com/opafo3/1/edit
-->
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
</style>

<style id="jsbin-css">

</style>
</head>
<body>
  <p><input id="show" type="checkbox" /><label for="show">show password</label></p>
  <p><input id="txtpassword" type="password" /></p>
<script>
$(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{
      var pswd = $("#txtpassword").val();
      $("#txtpassword").attr("id","txtpassword2");
      $("#txtpassword2").after( $("<input id='txtpassword' type='password'>") );
      $("#txtpassword2").remove();
      $("#txtpassword").val( pswd );
    }
  });
})
</script>



</body>
</html>

I have tried a couple of things but am getting nowhere.

Paphlagonia answered 11/2, 2013 at 16:8 Comment(0)

I had the same problem and wrote a simple jQuery plugin that handles it and posted it to github.

In your case the usage would be similar to:

<input type="password" id="inputGroup1">
<input type="password" id="inputGroup2">
<label>
  <input type="checkbox" class="input-mask" data-toggle='["inputGroup1", "inputGroup2"]'>Toggle Password
</label>
<script>
$('.input-mask').passwordToggle();
</script>

Trumpetweed answered 1/3, 2013 at 21:43 Comment(0)

It's Surprising that you coudn't get that over the internet. But yes, here's the code using Jquery 1.9.1

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#show").bind("click",function(){
                    $(".txtPassword").each(function(e){
                        if($($(".txtPassword")[e]).attr("type")=="password"){
                            $($(".txtPassword")[e]).attr("type","text");
                        }
                        else if($($(".txtPassword")[e]).attr("type")=="text"){
                            $($(".txtPassword")[e]).attr("type","password");
                        }
                    })
                })

            });
        </script>
    </head>
    <body>
        <p><input id="show" type="checkbox" /><label for="show">show password</label></p>
        <p><input class="txtpassword" type="password" /></p>
        <p><input class="txtpassword" type="password" /></p>
        <p><input class="txtpassword" type="password" /></p>
    </body>
</html>

Changed the id to class for your passwords. This code can take care of all those elements of type password/text having class txtpassword

Mortarboard answered 11/2, 2013 at 17:29 Comment(0)

Recommended topics

Hot tags