How to use set field value in Nintex Forms for Office 365 in SharePoint Online using JavaScript?

by
SharePoint Form Designer

Here we will discuss how we can use set field value in Nintex Forms for Office 365 in SharePoint Online using JavaScript. In this particular example, I have SharePoint online list which has Title, first name, and LastName column. Once the user puts some value in the FirstName then it should set LastName as FirstName. If you are new to Nintex for Office 365, then read Working with Nintex Forms for Office 365 SharePoint Online.

Check out Complete SharePoint Training Course ($46 OFF)

This can be achieved by using InfoPath forms using a rule but we can not do this by using any rule in Nintex. We have to use JavaScript to do this inside a Nintex form for Office 365.

Set field value in Nintex forms

Follow below steps to achieve these things.

Open the SharePoint Online List and then from the ribbon click on Nintex Forms button in the ribbon to open the Nintex form designer.

Nintex forms for Office 365 set field value
Nintex forms for Office 365 set field value

This will open the Nintex Forms for Office 365 designer and the list fields will appear.

Here first we need to set a JavaScript variable to the fields.

Double click on the first name textbox which will open the Control Settings dialog box. Here expand the Advanced section and first, select “Store Client ID in JavaScript variable” Yes and then give a variable name in the “Client ID JavaScript variable name” textbox. Here I have given the name as varFirstName.

nintex forms custom javascript set field value
nintex forms custom javascript set field value

Similarly, double-click on the LastName textbox and do the above step. The LastName looks like below:

set field value in nintex forms
Nintex forms how to set field value using javascript

Now we will write the JavaScript function which will set the field value. From the designer click on Form Settings.

nintex forms set field value javascript
Nintext forms office 365 set field value using javascript



Then in the Forms Settings dialog box, expand Custom JavaScript and put the below JavaScript code.

NWF$(document).ready(function(){
NWF$(“#”+varFirstName).change(function()
{
var selectedValue = NWF$(“#” + varFirstName).val();
NWF$(“#”+varLastName).val(selectedValue);
});
});

It should look like below:

nintex forms set field value
How to use set field value in Nintex Forms for Office 365 in SharePoint Online?

Now Save and Publish the Nintex form. And once the form published successfully.

Now try to add one item to the list. In the form, if you will put something in the FirstName text box and once you come out of the textbox LastName textbox will auto-populate like below:

nintex forms set default value javascript
nintex forms set default value javascript

You may like following Nintex forms for Office 365 tutorials:

In this Nintex forms for Office 365 tutorial, I have shown how to set field value in Nintex forms using JavaScript in SharePoint Online Office 365.

    • >