How to Add Custom JavaScript or jQuery in Nintex forms for Office 365 SharePoint Online

by
Leave request management and approval

This Nintex tutorial, we will discuss how to add JavaScript/ JQuery in Nintex form for office 365 in SharePoint Online.

Complete SharePoint Training Course Just for $199 (Just for Today)

In this example, I am going to explain how to get textbox value and display in calculated value control.

We will learn how to add custom javascript/jquery in Nintex form for Office 365, how to call Javascript by using function name in Nintex form, how to create the variables in Nintex forms for Office 365. People also search for nintex forms custom javascript.

Add Custom JavaScript or jQuery in Nintex forms for Office 365

Step 1: Create a list and go to your list ribbon, click on Nintex forms. now you will get Nintex form Designer view as shown below.

nintex forms custom javascript
Add custom JavaScript in Nintex forms

Step 2: Drag and Drop the “Calculated value” control from “FromControl” on the Nintex form to get and displaying textbox value after clicked on the “Submit” button as shown below.

nintex forms custom javascript
nintex forms jquery

Create a JavaScript variable in Nintex forms

Step 3: Double click on Textbox control, In control settings, go to “Advanced “. Select “Yes” from the drop-down list in “Store Client ID in JavaScript variable“. Enter the variable name in “Client ID JavaScript variable name“

nintex forms custom javascript
nintex forms custom javascript

Step 4: Next, Double click on “Calculated Value“, click on the  Textbox control and add the Name from “Named Controls” in “INSERT REFERENCE” tab. If you want to add text before the value, enter text in “Value prefix” as shown below.

nintex forms calculated field
nintex forms calculated field

Next, go to “Advanced“, create JavaScript variable name (same as we discussed in step 3) as shown below.

nintex forms custom javascript
nintex forms javascript custom include

Add Custom JavaScript/jQuery and Custom JavaScript Include in Nintex forms

Step 5: Click on “Form Settings“, Add your javascript/jquery code in “Custom JavaScritpt” and Add your JQuery reference link in “Custom JavaScript Include”  as shown below. 

NWF$(document).ready(function(){
NWF$("Button").click(function(){
retriveTextBoxValue();
});
});                                                                                                                        function retriveTextBoxValue() {
var empName = NWF$("#" + varEmpName).val();
if(empName != ' '){
NWF$("#" + employeeName).val(empName);
}
else{
alert("Employee Name is empty");
return false;
}
}
nintex forms javascript custom include
nintex forms javascript custom include

How to Call Javascript Method name in the Nintex forms

Step 6: Double click on “Save” button, Change Button Action to “Javascript“, Button type “Button” and Button label as “Submit” as shown below.

  • Next go to the Advanced, copy and paste your Method name(
    retriveTextBoxValue() ) in “Client Click” as shown below.
  • You are new to Nintex forms, go to “Formatting“, delete CSS Class name “nf-save-button” because we changed button Action to Javascript and we are not submitting any data to the list just we retrieve the Textbox value and display in a “Calculated Value” control on the Nintex forms.
  • You can do this way also, instead of Existing “Save” button on the Nintex form, delete that Save button, drag and drop the new Button control from the “FORM CONTROLS” on the Nintex forms. 
  • No default CSS Class names in new controls added from the “FORM CONTROLS”.
how to add javascript in nintex forms
how to add javascript in nintex forms

Step 7: Now save and Publish the Nintex forms. Enter the name in the text box and click on Submit button and see the value of the Textbox as shown below. 

javascript library in nintex forms
javascript library in nintex forms

You will get an error message when you click on the Submit button without enter the name in the Textbox control as shown below.

nintex forms jquery
nintex forms jquery

You may like following Nintex tutorials:

Conclusion

This Nintex forms tutorial explains how to use custom JavaScript in Nintex Forms for Office 365 SharePoint Online. We discussed how we can write custom JavaScript in Nintex forms Office 365, how we can call JavaScript function on button click using jQuery in SharePoint Online Office 365.

>