Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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.

share|improve this question

2 Answers

up vote 1 down vote accepted

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>
share|improve this answer
up vote 0 down vote

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.