[Resolved] Clearing specific form fields on load in edit

[Author]

Posts

[Beth]

I have a public edit form for twelve step meetings that contains sensitive information that I don't want to show on the front end, but the fields still need to be editable. (see screenshot) The fields are two sets of 3: Main Contact and Second Contact

Internal Contact Name
Internal Contact Email
Internal Contact Phone

When someone new takes over a meeting, they need to be able to give us their new internal contact, but the fields cannot have the previous contact info showing, since that information is internal and not for public viewing.

I want to clear all 6 fields on load and include a placeholder that says "Field Cleared, please enter new information"

I have tried adding value='' to the fields, but that does not work. I have to add a space, as in value=' '. This results in the space preventing the placeholder from displaying.

I have tried every JS code I can find in the Content Template and the Post Form, such as this one, with the ID 'clear' in each field I want to clear. None of them do anything.

window.onload = function(){
document.getElementById("clear").value = "";
}

How can I do this?

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

To suggest the best way to achieve this, I'll need to see how these fields appear on the front-end and are set up in the back-end.

Can you please share temporary admin login details, along with a link to page with this form?

Note: Your next reply will be private and please make a complete backup copy, before sharing the access details.

regards,
Waqar

[Waqar]

Hi,

Thank you for sharing these details.

To clear the values from the specific form fields, you can follow these steps:

1. First, wrap the target fields inside a special class name e.g. "field-to-clear"

Example:

<div class="form-group col-sm-12 field-to-clear">
	<label>Contact Name</label>
	[cred_field field='contact-name' force_type='field' id='clear' output='bootstrap' class='form-control' placeholder='Field Cleared!']
</div>

2. Next, you can target all these fields using a custom script like:

jQuery( document ).ready(function() {
	jQuery('.field-to-clear input').val("");
});

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[Beth]

This works perfectly! Thank you so much!