Simple Javascript concepts in Nintex Form

  • 11 October 2018
  • 5 replies
  • 1511 views
R
Userlevel 1
Badge +5

I will explain  the simple JavaScript process in the Nintex form by developing  an application that can calculate  area and perimeter of Squre with javascript code (without using calculatedValue).

 

1. Form Design

 

2. Control Setting  

Side

  • Name : formSide
  • Data Type : Integer
  • Validation : required to yes
  • Advanced | Client ID JavaScript variable name : jsSide

Area

  • Name : formArea
  • Advances | Client ID JavaScript variable name : jsArea

Perimeter

  • Name : formPerimeter
  • Advanced | Client ID JavaScript variable name : jsPerimeter

Reset Button

  • Button Action : Java Script
  • Button Label : reset
  • Advanced Client Click : fnResetForm()

 

3. Custom Javascript 

Insert Java Script code  |  Nintex Form | Setting | Custom Javascript |

 

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

NWF$('#' + jsSide).change(function(){

 // Get Value 

 var varSide = NWF$('#' + jsSide).val(); 

 var varArea = (varSide * varSide);

 var varPerimeter = (4  * varSide) ;

 

  // Set Value

  NWF$('#'+jsArea).val(varArea);

  NWF$('#'+jsPerimeter).val(varPerimeter);

 });

});

 

Try to test

4. Implement Reset Function 

 

 function fnResetForm(){

   NWF$('#'+jsSide).val("");

   NWF$('#'+jsArea).val("");

   NWF$('#'+jsPerimeter).val("");

  }

 

5. Full Code

   

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

NWF$('#' + jsSide).change(function(){

 // Get Value 

 var varSide = NWF$('#' + jsSide).val(); 

 var varArea = (varSide * varSide);

 var varPerimeter = (4  * varSide) ;

   // Set Value

  NWF$('#'+jsArea).val(varArea);

  NWF$('#'+jsPerimeter).val(varPerimeter);

 });

});

 function fnResetForm(){

   NWF$('#'+jsSide).val("");

   NWF$('#'+jsArea).val("");

   NWF$('#'+jsPerimeter).val("");

     }

 

Hopefully it can help you in using javascript on the nintex form

 

Regards, 

Reva Eka Patria

1 Attachment

5 replies

M
Badge +7

This has been really helpful to me. Thank you. One question I have is if I wanted to store these values in my list, how would I do it? I have tried using the "connected to" property on the form field but the list column does not get populated at run time the way the other non-JS-populated fields do.

C
Badge +3

I tried to rebuild this in my dev environment and when I attempt to preview the form, it simply spins and never previews. Everything is exactly as the instructions suggest. Any ideas why it isn't working? Has this been tested on 2.11.4.20?

AasimNaseem
Badge +2

Whenever there is an infinite loading spinner or white blank form loads, it means there is something wrong, either with



  • Any missing bracket, comma etc in your script.

  • Wrong syntax in your Rules.

  • Maybe you copy/paste the control name in the rule. Nintex converts the copy/pasted control names into plan text. Always select from the Named controls or from the item properties. 

B
Badge +1

Hi AasimNaseem, I think that we got the same problem...
When you copy and paste the scripts into the Custom JavaScript area, it can regulate the codes (trim the next lines), so Explanations on the codes ("//Get Value- //Set Value") may cause the problem. I just remove them, and then it has been solved.


D
Badge +2
Hi @reiva13
Thanks a lot for this explanation. Its very helpful to the beginners like me.
Here I would like to use only reset function in my form to reset the values.
How to I use this? Do I need to include ready function() prior to reset function()?
Someone can you please show me insight on this?

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings