This Nintex tutorial, we will discuss how to add JavaScript/ JQuery in Nintex form for office 365 in SharePoint Online.
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
SharePoint Online tutorial contents:
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.
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.
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“
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.
Next, go to “Advanced“, create JavaScript variable name (same as we discussed in step 3) as shown below.
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;
}
}
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”.
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.
You will get an error message when you click on the Submit button without enter the name in the Textbox control as shown below.
You may like following Nintex tutorials:
- Cascading dropdown in Nintex forms for Office 365 SharePoint Online
- Enable or Disable Save Button Based on Checkbox (Choice field) in SharePoint Online in Nintex Forms
- How to Show Hide Fields on Multiple Choices Checkbox in SharePoint Online List Form using Nintex forms for Office 365
- How to Customize SharePoint Online List form using Nintex forms for Office 365 (Part-2)
- How to Customize SharePoint Online List form using Nintex forms for Office 365 (Part-1)
- How to implement Validations in Nintex forms for Office 365 in SharePoint Online (4 Examples)
- How to Add Custom CSS in Nintex form for Office 365 SharePoint Online
- How to make a field mandatory based on Dropdown selected field Value in Nintex forms for Office 365
- How to use lookup function in Nintex forms for office 365 SharePoint Online
- Nintex Document Approval Workflow in SharePoint Online
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.
I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site EnjoySharePoint.com