Trigger value commit programmatically for input text component using guidebridge

[Srinivas_Opti]

Hello,

I am setting value of input text component using guidebridge 

email.value="abc@abc.com"  , now I have written some javascript changes based on "value commit" using rule editor.

so after setting the email value using email.value="abc@abc.com", noticed that it is not triggering "value commit" event.

Please could you provide inputs as how this can achieved programmatically

Regards,

Srinivas

[Pranay_M]

Hi @Srinivas_Opti,

To programmatically trigger a "value commit" event in AEM Forms when setting the value of an input text component using the guideBridge API, you need to ensure that the system recognizes the change as if it were made through the UI.

The "value commit" event is typically triggered when a user interacts with a field through the user interface, such as typing and then moving focus away from the field. Directly setting a field’s value using JavaScript (email.value = "abc@abc.com") does not trigger this event because it bypasses the typical UI interaction.

To mimic the behavior of user interaction, you can manually dispatch a change event after setting the value. This approach ensures that your JavaScript logic tied to the "value commit" event executes as expected.

// Set the value
email.value = "abc@abc.com";

// Create and dispatch a 'change' event
const event = new Event('change', {
  'bubbles': true,
  'cancelable': true
});
email.dispatchEvent(event);

• If you are using GuideBridge, you must ensure that your code subscribes to the necessary events. Here’s an example of how you can listen to and handle events using GuideBridge:

guideBridge.on("elementValueChanged", function(event, payload) {
  // Handle the value change event
  console.log(`Value changed for ${payload.target.name}, new value: ${payload.newText}`);
});

Thanks
Pranay

[Srinivas_Opti]

Hello @Pranay_M 

Thanks for the input ,

I am getting the below error , how to resolve it 

"Uncaught TypeError: events.split is not a function"  on using dispatchEvent

Regards,

Srinivas

[Pranay_M · Accepted solution]

Hi @Srinivas_Opti,

Can you please try the below code snippet.

// Safely grab the input field (assuming it has id="email1")
const emailInput = document.querySelector('#email1');

if (emailInput) {
// Set the value
emailInput.value = "email@ab.com";

// Create and dispatch a standard change event
const event = document.createEvent('HTMLEvents');
event.initEvent('change', true, true);
emailInput.dispatchEvent(event);
} else {
console.warn("Element with ID 'email1' not found.");
}
Thanks
Pranay

[Khushwant_Singh]

@Srinivas_Opti, I just wanted to check in—has the issue been resolved, or are you still in the process of gathering information?