cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
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
2 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