cancel
Showing results for 
Search instead for 
Did you mean: 
reiva13
Nintex Newbie

Simple Javascript concepts in Nintex Form

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

Labels: (1)
Reply
4 Replies
mindymac03
Nintex Newbie

Re: Simple Javascript concepts in Nintex Form

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.

0 Kudos
Reply
cjones69
Nintex Newbie

Re: Simple Javascript concepts in Nintex Form

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?

0 Kudos
Reply
AasimNaseem
Nintex Newbie

Re: Simple Javascript concepts in Nintex Form

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. 
0 Kudos
Reply
burcuakgul
Nintex Newbie

Re: Simple Javascript concepts in Nintex Form

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.

NintexFormSetting.PNG

0 Kudos
Reply