Created
April 9, 2022 11:04
-
-
Save tyte/e58e1536390524992c2c0af2828d95bc to your computer and use it in GitHub Desktop.
JS toggle multiple passwords visibility - 2 forms
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Password Visibility - Multiple Forms</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<style type="text/css"> | |
body { | |
margin: 0 auto; | |
max-width: 40em; | |
width: 88%; | |
} | |
label { | |
display: block; | |
width: 100%; | |
} | |
input { | |
margin-bottom: 1em; | |
} | |
[type="checkbox"] { | |
margin-bottom: 0; | |
margin-right: 0.25em; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>Password Visibility - Multiple Forms</h1> | |
<h2>Change Username</h2> | |
<p>Enter your username and password to change your username.</p> | |
<form> | |
<div> | |
<label for="username">Username</label> | |
<input type="text" name="username" id="username"> | |
</div> | |
<div> | |
<label for="password">Password</label> | |
<input type="password" name="password" id="password"> | |
</div> | |
<div> | |
<label for="show-password"> | |
<input type="checkbox" name="show-password" id="show-password"> | |
Show password | |
</label> | |
</div> | |
<p> | |
<button type="submit">Change Username</button> | |
</p> | |
</form> | |
<h2>Change Password</h2> | |
<p>Enter your current password and new password below.</p> | |
<form id="form-2"> | |
<div> | |
<label for="current-password">Current Password</label> | |
<input type="password" name="current-password" id="current-password"> | |
</div> | |
<div> | |
<label for="new-password">New Password</label> | |
<input type="password" name="new-password" id="new-password"> | |
</div> | |
<div> | |
<label for="show-passwords"> | |
<input type="checkbox" name="show-passwords" id="show-passwords"> | |
Show passwords | |
</label> | |
</div> | |
<p> | |
<button type="submit">Change Passwords</button> | |
</p> | |
</form> | |
<script> | |
// Variables form 1 | |
let toggler1 = document.getElementById('show-password'); | |
let passwordForm1 = document.getElementById('password'); | |
// Variables form 2 | |
let toggler2 = document.getElementById('show-passwords'); | |
let form2 = document.getElementById('form-2'); | |
let passwordsForm2 = form2.querySelectorAll('[type="password"]'); | |
document.addEventListener('click', function (event) { | |
if (toggler1.checked) { | |
passwordForm1.type = "text"; | |
} else { | |
passwordForm1.type = "password"; | |
} | |
if (toggler2.checked) { | |
for (let passwordField of passwordsForm2) { | |
passwordField.type = "text"; | |
} | |
} else { | |
for (let passwordField of passwordsForm2) { | |
passwordField.type = "password"; | |
} | |
} | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment