Show password typed in two fields by clicking on only one icon

Question

Show password typed in two fields by clicking on only one icon

Navigation

#1 by (0 votes)

-1

I have a page to change the user's password with two fields one for the password and another to confirm the password. I would like to know how to display the password entered in both fields by clicking on just one icon, in the code below with only one of the fields.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="card card-container" style="margin-top: 100px;">
            <!-- <img class="profile-img-card" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" alt="" /> -->
            <div align="center" style="margin-top: 30px;">
            <th></th>
            <br><br><div style="color: rgb(104, 145, 162); font-size: 150%;">Mudar Senha</div>
            </div><br><div style="color: red; text-align: center">Alteração De Senha</div>
            <p id="profile-name" class="profile-name-card"></p>
            <form class="form-signin" method="POST" action="pass_user.php">
			<input type="hidden" name="usuario" value="<?php print $usuário = $_SESSION['usuarioId']; ?>" >
                <input type="password" id="inputPassword1" class="form-control" name="senha1" placeholder="Nova Senha" required autofocus><br>
                <input type="password" id="inputPassword2" name="senha2" class="form-control" placeholder="Confirme Nova Senha" required>
				<button type="button" class="btn btn-sm glyphicon glyphicon-eye-open " style="background:transparent;border:none;" onclick="mostrar()"></button>
                            </form>
                            <script>
                                function mostrar(){
                                    var tipo = document.getElementById("inputPassword1");
                                    if(tipo.type == "password"){
                                        tipo.type = "text";
                                    }else{
                                        tipo.type = "password";
                                    }
                                }
                            </script>
                <button class="btn btn-lg btn-primary btn-block btn-signin" type="submit">Login</button>
</form><!-- /form -->
	
	   <script>
    $('form').on('submit', function () {
        if ($('#inputPassword1').val() != $('#inputPassword2').val()) {
            alert('Senhas diferentes');
            return false;
        }
    });
</script>

javascript html5 twitter-bootstrap

asked by anonymous 29.05.2018 / 23:25

1 answer

Black Screen in MySQL Workbench Problem with lottery game code

score 0 · Accepted Answer

To show the password in both at the same time, you only have to catch the new field, and apply the type of the first one:

var tipo2 = document.getElementById("inputPassword2");
tipo2.type = tipo.type; //aplica o tipo que ficou no primeiro campo

See the example:

function mostrar() {
  var tipo = document.getElementById("inputPassword1");
  var tipo2 = document.getElementById("inputPassword2");

  if (tipo.type == "password") {
    tipo.type = "text";
  } else {
    tipo.type = "password";
  }

  tipo2.type = tipo.type; //aplica o tipo que ficou no primeiro campo
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="card card-container" style="margin-top: 100px;">
  <!-- <img class="profile-img-card" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" alt="" /> -->
  <div align="center" style="margin-top: 30px;">
    <th></th>
    <br><br>
    <div style="color: rgb(104, 145, 162); font-size: 150%;">Mudar Senha</div>
  </div><br>
  <div style="color: red; text-align: center">Alteração De Senha</div>
  <p id="profile-name" class="profile-name-card"></p>
  <form class="form-signin" method="POST" action="pass_user.php">
    <input type="hidden" name="usuario" value="<?php print $usuário = $_SESSION['usuarioId']; ?>">
    <input type="password" id="inputPassword1" class="form-control" name="senha1" placeholder="Nova Senha" required autofocus><br>
    <input type="password" id="inputPassword2" name="senha2" class="form-control" placeholder="Confirme Nova Senha" required>
    <button type="button" class="btn btn-sm glyphicon glyphicon-eye-open" style="background:transparent;border:none;" onclick="mostrar()"></button>
  </form>

  <button class="btn btn-lg btn-primary btn-block btn-signin" type="submit">Login</button>
  </form>
  <!-- /form -->

  <script>
    $('form').on('submit', function() {
      if ($('#inputPassword1').val() != $('#inputPassword2').val()) {
        alert('Senhas diferentes');
        return false;
      }
    });
  </script>

If you want you can also transform your if into a ternary that is shorter and has the same readability:

tipo.type = tipo.type == "password" ? "text" : "password";

Edit :

To change the icon as well, you need to be able to analyze the icon you are in and change what you have. Because the icons have to do with the applied classes, you can use the functions contains , add and remove of classList .

Of course I could do with JQuery as well, but since the first part of the code is done in pure JS, I show the part of the icon in pure JS as well.

Implementation:

function mostrar() {
  var tipo = document.getElementById("inputPassword1");
  var tipo2 = document.getElementById("inputPassword2");

  if (tipo.type == "password") {
    tipo.type = "text";
  } else {
    tipo.type = "password";
  }

  tipo2.type = tipo.type; //aplica o tipo que ficou no primeiro campo
  
  
  var botao = document.querySelector(".btn.btn-sm"); //obter o botão
  
  if (botao.classList.contains("glyphicon-eye-open")){ //se tem olho aberto
      botao.classList.remove("glyphicon-eye-open"); //remove classe olho aberto
      botao.classList.add("glyphicon-eye-close"); //coloca classe olho fechado
  }
  else { //senão
      botao.classList.remove("glyphicon-eye-close"); //remove classe olho fechado
      botao.classList.add("glyphicon-eye-open"); //coloca classe olho aberto
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="card card-container" style="margin-top: 100px;">
  <!-- <img class="profile-img-card" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" alt="" /> -->
  <div align="center" style="margin-top: 30px;">
    <th></th>
    <br><br>
    <div style="color: rgb(104, 145, 162); font-size: 150%;">Mudar Senha</div>
  </div><br>
  <div style="color: red; text-align: center">Alteração De Senha</div>
  <p id="profile-name" class="profile-name-card"></p>
  <form class="form-signin" method="POST" action="pass_user.php">
    <input type="hidden" name="usuario" value="<?php print $usuário = $_SESSION['usuarioId']; ?>">
    <input type="password" id="inputPassword1" class="form-control" name="senha1" placeholder="Nova Senha" required autofocus><br>
    <input type="password" id="inputPassword2" name="senha2" class="form-control" placeholder="Confirme Nova Senha" required>
    <button type="button" class="btn btn-sm glyphicon glyphicon-eye-open" style="background:transparent;border:none;" onclick="mostrar()"></button>
  </form>

  <button class="btn btn-lg btn-primary btn-block btn-signin" type="submit">Login</button>
  </form>
  <!-- /form -->

  <script>
    $('form').on('submit', function() {
      if ($('#inputPassword1').val() != $('#inputPassword2').val()) {
        alert('Senhas diferentes');
        return false;
      }
    });
  </script>