Skip to main content

I set my text field’s JavaScript ID to:
txtMember_DelegatedDes
My calculated value’s JavaScript ID is:
txtMember_Delegated

I plugged this into my form’s Custom JavaScript:
NWF.FormFiller.Events.RegisterAfterReady(function() { var x = NWF$("#" + txtMember_Delegated).val(); var y = NWF$("#" + txtMember_DelegatedDes); y.val(x); });

Nothing is happening when the calculated field recalculates. I would like to have it set the text field with the calculated field’s value whenever the calculated field changes. Please and thank you! 

You’re almost there.

 

The only missing piece is that you’re not telling it *when* you’d like it to do this calculation. So as of now, I believe it would just update the value of your target Input to whatever was inside of the Calculated Control as soon as the form is ready and executes everything inside of the Form Event.

 

What needs to happen is that you need to setup an Event Handler for the Calculated Control so that when its value changes, that change is “handled” by whatever logic you’ve placed inside of the handler. 

 

Here is an example form:

an example form with 2 inputs, 1 calculated control, and 1 output
 

The labels are showing the Control Names, and they all have JavaScript Variables for the Control’s ID that is *also* the same name as the Control Name.

 

The formula for my Calculated Control just ads the vales from both Input Controls:

the formula for the Calculated Control​

 

Now all we gotta do is add some code into the custom Javascript to deal with setting up the Event Handler that catches when the Caculated Control’s value has changed:

/* Just like your code I'm using the same Form Event */
NWF.FormFiller.Events.RegisterAfterReady(function(){

/*
But now I'm creating an event handler for when the
Calculated Control changes using jQuery's 'on' method.

Anytime the onChange event is fired by the control I'm
targeting (in this case NWF$("#" + myCalculatedControl)),
it will check to see if there are any event handlers
attached to the control. The event handler is just a function
or function expession that you pass as an argument into
the 'on' method.
*/
NWF$("#" + myCalculatedControl).on("change", function(event){

/*
this is the handler! we're in it!

All of this will be executed whenever the target control
fires an onChange event!
*/

/* setup a variable to get the calc control's val */
var calculatedValue = NWF$(event.target).val();

/* convert it into an integer */
var calculatedValueInt = parseInt(calculatedValue, 10);

/* make a var for the output Control */
var outputControl = NWF$("#" + myOutputControl);

/*
some silly logic that will display a message
in our Output Control based on some conditions
*/
if (Number.isNaN(calculatedValueInt)) {
outputControl.val("Not a number :(");
} else {
if (calculatedValueInt > 9000) {
outputControl.val("IT'S OVER 9000!");
} else {
outputControl.val("Your power level is weak!");
}
}

});
});

 

That same code but without comments:

NWF.FormFiller.Events.RegisterAfterReady(function(){

NWF$("#" + myCalculatedControl).on("change", function(event){

var calculatedValue = NWF$(event.target).val();
var calculatedValueInt = parseInt(calculatedValue, 10);
var outputControl = NWF$("#" + myOutputControl);

if (Number.isNaN(calculatedValueInt)) {
outputControl.val("Not a number :(");
} else {
if (calculatedValueInt > 9000) {
outputControl.val("IT'S OVER 9000!");
} else {
outputControl.val("Your power level is weak!");
}
}

});
});

 

The Results:

 

I hope that this helps to unravel the mystery.

 

To learn more about events in general, here are some resources

 

MDN’s Introduction to Events: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

 

and jQuery’s on method documentation: https://api.jquery.com/on/

 

a list of common html element events: https://www.w3schools.com/jsref/dom_obj_event.asp

 

 


Reply