andrea/leanwebclub
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Solution for Toggle Multiple Form Password Visibility project

Browse source
This commit is contained in:
Andrea Fazzi 2024-07-29 08:44:08 +02:00
parent 6c259f456f
commit 77844c2ead
2 changed files with 9 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
js-essentials/toggle-multiple-forms/index.html
View file

@ -19,12 +19,12 @@
<div>
<label for="password">Password</label>
<input type="password" name="password" id="password">
<input type="password" class="password" name="password" id="password">
</div>
<div>
<label for="show-password">
<input type="checkbox" name="show-password" id="show-password">
<input type="checkbox" name="show-password">
Show password
</label>
</div>
@ -40,12 +40,12 @@
<form>
<div>
<label for="current-password">Current Password</label>
<input type="password" name="current-password" id="current-password">
<input type="password" class="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">
<input type="password" class="password" name="new-password" id="new-password">
</div>
<div>

16
js-essentials/toggle-multiple-forms/script.js
View file

@ -1,19 +1,13 @@
let passwordFields = document.querySelectorAll('input[type="password"]');
let checkboxes = document.querySelectorAll('input[type="checkbox"]');
let state = {true: "text", false: "password" };
window.addEventListener('click', function (event) {
if (event.target.matches('#show-password')) {
if (event.target.matches('input[type="checkbox"]')) {
let checkbox = event.target;
let passwordFields = checkbox.form.querySelectorAll('.password');
for (let field of passwordFields) {
field.type=state[event.target.checked];
field.type=state[checkbox.checked];
}
}
else {
console.log("Show passwords toggle");
for (let field of passwordFields) {
field.type=state[event.target.checked];
}
}
});