Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Detect field value change in adaptive forms

Avatar

Level 4

Hello,

 

Is there a way to determine if the value of a field has been changed in an adaptive HTML form other than having a hidden field with the initial value in it that gets compared when the Value Commit event is triggered?

1 Accepted Solution

Avatar

Correct answer by
Level 10

Hi, you can add event listeners to various events. As an example: This script in the initialize event of the guide root panel will cause, that every change in your form is reported into the console of the web browser.

 

guideBridge.on("elementValueChanged" , function(event, payload) {
     console.log("The value of object '" + payload.target.name + "' has been changed from '" + payload.oldText + "' into '" + payload.newText + "'.");
});

View solution in original post

8 Replies

Avatar

Correct answer by
Level 10

Hi, you can add event listeners to various events. As an example: This script in the initialize event of the guide root panel will cause, that every change in your form is reported into the console of the web browser.

 

guideBridge.on("elementValueChanged" , function(event, payload) {
     console.log("The value of object '" + payload.target.name + "' has been changed from '" + payload.oldText + "' into '" + payload.newText + "'.");
});

Avatar

Level 4

payload.oldText returns 'undefined' for every change. I was trying to avoid using hidden fields, but I guess I don't have much of a choice. 

Avatar

Level 4

I was able to set some variables for the original values in the guide panel init that persisted when the event fired. This works great, thanks!

Avatar

Level 1

Hi,

Could you please explain more with some example code snippet, how you did this? I am facing the same issue.Thanks!

Avatar

Level 4

Here is an example where I am monitoring some date fields for changes. This code is entered as the Initialize Rule of the Root Panel object.

 

//keep track of the initial values of the fields that you want to monitor for changes
var odt = RequestDeadlineTime.value;
var odd = RequestDeadlineDate.value;
var otd = TranslatorDeadlineDate.value;
var ott = TranslatorDeadlineTime.value;
var valList = [];

//create the event listener
guideBridge.on("elementValueChanged" , function(event, payload) {
  //check if the changed element was one of the ones tha you want to monitor
  if(payload.target.name == "RequestDeadlineTime" || payload.target.name == "RequestDeadlineDate" || payload.target.name == "TranslatorDeadlineTime" || payload.target.name == "TranslatorDeadlineDate") {
     //record the change in the log if you desire
	 console.log("The value of object '" + payload.target.name + "' has been changed from '" + payload.oldText + "' into '" + payload.newText + "'.");
     console.log(odd + " " + odt);
	 //perform some logic if the monitored fields are changed.
	 //In this case, I am validating some dates. if they are valid, I show some other field.
     if(guideBridge.validate(valList,RequestDeadlineTime.somExpression) && guideBridge.validate(valList,TranslatorDeadlineTime.somExpression)) {
       updateDeadline.visible = true;
     } else {
       updateDeadline.visible = false;
     }
  }
});

Avatar

Employee Advisor

@SeanLapointe 

Usually button clicks or field exit events can be used to validate the rules so you can check for the  (field value change AND value of the field against the set default value of the hidden field) here.

 

Avatar

Employee Advisor

@SeanLapointe  You can go with what @radzmar  suggested or you can create custom listener as well. 

 

const input = document.querySelector('input');
const log = document.getElementById('yourFieldID');

input.addEventListener('change', updateValue);

function updateValue(e) {
  log.textContent = e.target.value;
}