[Gelöst] Modify custom field to display like a password field

[Author]

Artikel

[larryL]

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!

[Minesh]

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:
versteckter Link

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

More info:
=> versteckter Link
=> versteckter Link

[larryL]

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!

[Minesh]

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.

[Minesh]

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:
=> versteckter Link

[larryL]

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!

[Minesh]

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:
=> versteckter Link

Can you please confirm it works as expected now.

[larryL]

My issue is resolved now. Thank you!