Updating/Triggering Form Variable with JavaScript

  • 31 July 2018
  • 4 replies
  • 99 views

Badge +7

I'm looking for a way to trigger one or more Form Variables using JavaScript.

I did find an article with a comment by @azetuche (Re: Can i catch the form variables in javascript in Nintex forms ??) using the following code to set the value of a Form Variable:

NWF$('[data-controlname*=FormVariableName] input').val();

but that's setting the value directly, and not exactly what I need.

I have several List Lookups as checkboxes on this form. When the checkboxes are selected, I have Form Variables running calculations. These are working great on their own.

I also have one unbound checkbox called Select All. When this checkbox is selected, I have JavaScript checking all of the checkboxes. Unfortunately, this action is not triggering the Form Variables to run their calculations. 

I've also unsuccessfully tried using the JavaScript from above, but using .trigger() instead of .val().

Additionally, I found Populate dynamically a calculated value by using a JavaScript function call‌ which uses

NWF.FormFiller.Functions.ProcessOnChange‍();

but that didn't work either because I'm not using Calculated Value fields, and I'd prefer not to.

Any help would be greatly appreciated.


4 replies

Userlevel 5
Badge +14

ProcessOnChange() expects to pass in a control/element which has been changed. so have you (correctly) passed in one of changed lookup checkboxes?

how do you make single checkbox checked? by directly setting its checked property?

if you did it by calling its .click() event, dependent calculations should be executed.

using the following code to set the value of a Form Variable

that's need not be very reliable.

at first, form variable might be recalculated out of your control by an indirect event. so despite you set it to some value, at some unknown point it might be recalculated to another value.

and at second, if you set its value by a javascript, it will not in turn cause to recalculate dependent formulas.

make the form variable rather dependent on an 'Sellect all' check box so that it recalculates on its change.

Userlevel 5
Badge +14

You should be able to accomplish what you want simply by triggering a 'change' event on the inputs of type "checkbox". 

- Form -

All Controls: 

217917_pastedImage_3.png

Control (1) : Yes/No: 

217918_pastedImage_4.png

Control (2): Choice:

217919_pastedImage_5.png

Control (3): Calculated Value:

217920_pastedImage_6.png

Form Variable: 

217916_pastedImage_2.png

Rules: 

Formatting for the Choice Controls: 

217921_pastedImage_24.png

Custom Javascript

217922_pastedImage_25.png

Copy  / Paste Code

NWF$("[data-controlname='checkAll_Toggle'] input[type='checkbox']").on("change", function(event){
  if (NWF$(event.target || event.srcElement).prop("checked")) {
    NWF$("[data-controlname='someChoices'] input[type='checkbox']").prop("checked", true).trigger("change");
  }
});

How does it work? 

It puts a "change" event handler on the 'Toggle All' Control. If you click on the toggle all control, it'll invoke the event handler. 

Once the event is being handled by our code, we check to see if the Toggle All is being set to On or Off (true or false). 

If it's true, then we get ALL of the inputs of type "checkbox" that are children to the "someChoices" control, and set them all to checked, and then trigger the change event on them, resulting in the form variable being updated, and the 'length' of the array being pushed to our Calculated Value Control immediately. 

So.... 

On Load: 

217923_pastedImage_26.png

Two Items Checked: 

217924_pastedImage_27.png

Check All Checked: 

217925_pastedImage_28.png

I hope that this helps you accomplish what it is you're trying to do. 

Badge +7

This is EXACTLY why I love this community so much! Thank you!

This was what I needed to get this project completed by Monday. I really appreciate your help, and that you went the extra mile to build out an example, include screenshots (with highlights), include your code (with a copy/paste section), and fully explain the entire process. Now this can easily help others as well!

Userlevel 5
Badge +14

I'm glad that it's going to help, and this is indeed a wonderful community! 

Reply