Show Password display on both field 'Password & Confirm Password'

Cherry · January 24, 2022

Hi everyone, I customized the show password, but only the 'Password field is showing'. How to show the text in 'Confirm Password'?

This is the code.

<!DOCTYPE html>
<html>
<body

<input type="password" maxlength="255" name="InsertRecordpassword" id="InsertRecordpassword" value="" class="cbFormPassword" size="35"><br><br>
<input type="checkbox" onclick="myFunction()">Show Password

</body>
</html>

KlisaN137 · January 24, 2022

Hi @Cherry,

In order to show passwords in both fields when the custom button 'Show Password' is checked, you can use this code in the HTML block:

<input type="checkbox" id="checkPasswordCheckbox">Show Password</input>

<script>
document.addEventListener('DataPageReady', function (event) {
           const passwords = document.querySelectorAll('.cbFormPassword');
           const check = document.querySelector('#checkPasswordCheckbox');

           function changePassField(arg){
                 for(p of passwords){
                      p.type = arg;
                 }
           }

           function checkHandler(e){
                   this.checked === true ? changePassField('text') : changePassField('password');
           }

          check.addEventListener('click',checkHandler);
});
</script>

Cherry · January 24, 2022

@KlisaN137 Thank you for the fast reply. I will try this..

Cherry · January 24, 2022

6 hours ago, KlisaN137 said:

Hi @Cherry,

In order to show passwords in both fields when the custom button 'Show Password' is checked, you can use this code in the HTML block:

<input type="checkbox" id="checkPasswordCheckbox">Show Password</input>

<script>
document.addEventListener('DataPageReady', function (event) {
           const passwords = document.querySelectorAll('.cbFormPassword');
           const check = document.querySelector('#checkPasswordCheckbox');

           function changePassField(arg){
                 for(p of passwords){
                      p.type = arg;
                 }
           }

           function checkHandler(e){
                   this.checked === true ? changePassField('text') : changePassField('password');
           }

          check.addEventListener('click',checkHandler);
});
</script>

Hi @KlisaN137, I tried the code but it's not working. The checkbox is gone.

KlisaN137 · January 25, 2022

Do you have some other custom JavaScript or CSS code on the page?

Instead of manually adding the input field for checkbox 'Show Password', I would suggest using a Virtual Field with type 'Checkbox'. Now all you have to do is replace

const check = document.querySelector('#checkPasswordCheckbox'); with const check = document.querySelector('#cbParamVirtual1');

#cbParamVirtual1 would be ID if that is the only Virtual Field in the Form.

Cherry · January 25, 2022

2 minutes ago, KlisaN137 said:

Do you have some other custom JavaScript or CSS code on the page?

Instead of manually adding the input field for checkbox 'Show Password', I would suggest using a Virtual Field with type 'Checkbox'. Now all you have to do is replace

const check = document.querySelector('#checkPasswordCheckbox'); with const check = document.querySelector('#cbParamVirtual1');

#cbParamVirtual1 would be ID if that is the only Virtual Field in the Form.

I will try this. Thank you

Meekeee · January 29, 2022

Hi @Cherry You may also have a toggle password in Login Page or authentication. You may try this: https://www.w3schools.com/howto/howto_js_toggle_password.asp

In your authentication, add an HTML Block and add this code:

<input type="checkbox" onclick="myFunction()">Show Password

In the Footer, add this code:

<script>
function myFunction() {
  var x = document.getElementById("xip_Password");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}
</script>

Apply the Authentication in the DataPage and this is the result:

Hope it helps!

Cherry · February 2, 2022

@Meekeee thank you. It's working..

AmberSinclair · February 19, 2022

On 1/24/2022 at 5:05 PM, Cherry said:

Hi everyone, I customized the show password, but only the 'Password field is showing'. How to show the text in 'Confirm Password'?

This is the code.

<!DOCTYPE html>
<html>
<body

<input type="password" maxlength="255" name="InsertRecordpassword" id="css flip image tRecordpassword" value="" class="cbFormPassword" size="35"><br><br>
<input type="checkbox" onclick="myFunction()">Show Password

<script>
function myFunction() {
var x = document.getElementById("InsertRecordpassword");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>

</body>
</html>

Thank you for sharing such an amazing information. I will try.

Login

Show Password display on both field 'Password & Confirm Password'

Question

Cherry

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

KlisaN137

Link to comment

Share on other sites

Cherry

Link to comment

Share on other sites

Cherry

Link to comment

Share on other sites

KlisaN137

Link to comment

Share on other sites

Cherry

Link to comment

Share on other sites

Meekeee

Link to comment

Share on other sites

Cherry

Link to comment

Share on other sites

AmberSinclair

Link to comment

Share on other sites

Join the conversation

Browse