Skip Navigation

[Resolved] Modify custom field to display like a password field

This thread is resolved. Here is a description of the problem and solution.

Problem:
Modify custom field to display like a password field

Solution:
You need to add the mentioned custom JS code to your form's JS section in order to toggle the field values as password and text.

You can find the proposed solution, in this case, with the following reply:
=> https://toolset.com/forums/topic/modify-custom-field-to-display-like-a-password-field/#post-1199098

Relevant Documentation:

This support ticket is created 5 years, 1 month ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Kolkata (GMT+05:30)

This topic contains 7 replies, has 2 voices.

Last updated by larryL 5 years, 1 month ago.

Assisted by: Minesh.

Author
Posts
#1196924

Hi,

I have a custom field that displays content that I want to toggle readability like a password field. So when the field loads it shows ********** and you click a button or link and the ***** disappears and the content will appear. How can I do this?

I am displaying this field as a read only field in a CRED form.

Thanks!

#1197102

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Hello. Thank you for contacting the Toolset support.

Well - to mask or toggle your textbox like password you need to add custom JS to it.

For example:
hidden link

You need to adjust the code as per your target field.

More info:
=> hidden link
=> hidden link

#1197532

I added this to the cred form and it doesn't work:

API Key
[cred_field field="hidden" type="password" id="myInput" class="form-control" output="bootstrap"]
<!-- An element to toggle between password visibility -->
<input type="checkbox" onclick="myFunction()">Show Key

And I added the script to the JS section.

Also, I need the field to be read only. Thanks!

#1197638

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

I think this is not the correct way. Can you please tell me for which field you want to apply the toggle password functionality?

Please share problem URL and access details.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I would additionally need your permission to de- and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important. If you agree to this, please use the form fields I have enabled below to provide temporary access details (wp-admin and FTP).

I have set the next reply to private which means only you and I have access to it.

#1198609

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Can you please check now, I've added the following code to your form's JS box:

function toggle_pwd_field() {
  pass_id = jQuery('input[name="user_pass"]').attr("id");
  var x = document.getElementById(pass_id);
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}

Added the following link to your form after submit button:

<input type="checkbox" onclick="toggle_pwd_field()">Show Key </a>

I can see now its working with the provided access details:
=> hidden link

#1198972

Yes, what you did does work. but you did it to the wrong field. The field I'm trying to add this to, as I mentioned before is :

ref_cdmv_api_key NOT password. I need to use that 'show/hide' function applied to this field and for it to be read only.

Thanks!

#1199098

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Ok - so to make the field readonly - I've added the attribute readonly="true":

[cred_field field="ref_cdmv_api_key" type="password" readonly="true" class="form-control" output="bootstrap"]

And adjusted the JS code as given under for password toggle:

function toggle_pwd_field() {
  pass_id = jQuery('input[name="ref_cdmv_api_key"]').attr("id");
  
  var x = document.getElementById(pass_id);
  if (x.type === "text") {
    x.type = "password";
  } else {
    x.type = "text";
  }
}
jQuery(document).ready(function($){
  
    pass_id = jQuery('input[name="ref_cdmv_api_key"]').attr("id");
    x = document.getElementById(pass_id);
    x.type = 'password'; 
});

I can see now when page is loaded - field is readonly and with stars and when you checkmark the checkbox it displays the text:
=> hidden link

Can you please confirm it works as expected now.

#1199451

My issue is resolved now. Thank you!

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.