Jump to content
  • 1

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


Cherry
 Share

Question

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

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

</body>
</html>

1.PNG

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

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>

 

Link to comment
Share on other sites

  • 0
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.

 

1.PNG

Link to comment
Share on other sites

  • 0

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.

Link to comment
Share on other sites

  • 0
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

Link to comment
Share on other sites

  • 0

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:

image.png

 

<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>

image.png

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


image.png

Hope it helps!

Link to comment
Share on other sites

  • 0
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>

1.PNG

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...