Dynamic Default Values when Entering/Exiting Text Fields

[Taz_2424]

I'm new to AEM Forms 6.5 and trying to understand how to create a dynamic default value for text fields.  Obviously I know I can input the default value in the field's property value, but that doesn't give me the result I'm looking for.  What I would like my form fields to do is have a default value in the text field, then when a user enters the field, the default text disappears, but if the user exits the text field without inputting any data, the default value reappears.  Is this possible?

[Pranay_M]

Hi @Taz_2424,

To achieve this use case you can make use of the different events within AEM Forms. For example, you can add the default text for the field and use the "ENTER" event or the "FOCUS" to set the value for the field as null. This is to make sure that you display the value in the field when you launch the form and the default text will disappear as soon as you try to add/enter any value for the specific field.

Thanks
Pranay

[Taz_2424]

Hi @Pranay_M,

Thank you for your reply.  I used the "ENTER" event to create an action to make the field null upon entering it, but that would only need to apply when the field contains the default value.  I don't want it to execute if the user input their own data.

I also tried this Javascript on the "ENTER" event

 form1.CO_Part.CAA::enter - (JavaScript, client)

var field = this;
var defaultValue = "[Insert CAA per local policy]";
if (field.rawValue === defaultValue) {
    field.rawValue = "";
}

Then used this on the "EXIT" event

 form1.CO_Part.CAA::exit - (JavaScript, client)

var field = this;
var defaultValue = "[Insert CAA per local policy]";
if (field.rawValue === "") {
    field.rawValue = defaultValue;
}

 Unfortunately, these didn't work as I had hoped.

[Taz_2424 · Accepted solution]

I got it to work using the following. Not sure if this is the correct way, but it's working like I need it to work.

On Initialize Event:

var defaultValue = "[ the default value ]";
if (this.rawValue === null || this.rawValue === "") {
    this.rawValue = defaultValue;
}

On Enter Event:

var defaultValue = "[ the default value ]";
if (this.rawValue === defaultValue) {
    this.rawValue = "";
}

On Exit Event:

var defaultValue = "[ the default value ]";
console.println("Exit Event Triggered: " + this.rawValue);
if (this.rawValue === null || this.rawValue.trim() === "") {
    this.rawValue = defaultValue;
    console.println("Set Default Value");
}

[Khushwant_Singh]

Potential Issues & Improvements:

• The same default value is hardcoded in all three events. If it changes, you must update it in three places, increasing maintenance risk. Store defaultValue in a global script object or bind it as a custom property to the field.
• In the Exit Event, checking for null and using .trim() can cause an error if this.rawValue is null. Reorder the condition to prevent errors: 

  if (this.rawValue === null || this.rawValue.trim?.() === "") {

• Debugging logs like console.println() are helpful during development but may clutter logs in production. 

  Add a condition to enable logs only when debugging.

[Taz_2424]

Understand.

• The default value is actually different for each one. It’s just the same for the scripts I posted to save space and show the solution I used.
• As far as the exit event, understand using trim can cause issues, but for whatever reason when I tried to use it without it, it wouldn’t work properly. Adding it actually made it work the way I needed it to work.
• I’ll try removing the debugging condition.