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

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.

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

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

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

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.

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:

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

You may like following Nintex forms for Office 365 tutorials:

• Steps to create column in Nintex forms designer in Office 365 SharePoint Online
• How to use Repeating Section in Nintex forms for Office 365 SharePoint online?
• How to change Nintex Forms header banner in SharePoint Online Office 365?
• How to apply rules in Nintex forms for Office 365 SharePoint online?
• How to reset to out of box list forms from Nintex Forms customization in SharePoint Online
• How to use set field value in Nintex Forms for Office 365 in SharePoint Online using JavaScript?
• How to use JavaScript in Nintex forms for Office 365?
• How to implement mandatory field validation in Nintex forms in Nintex forms for Office 365 SharePoint Online?
• Steps to show cascading dropdown in Nintex Forms for Office 365 SharePoint Online
• How to implement validation rules by condition in Nintex forms for Office 365 SharePoint Online?
• Add different layouts into Nintex forms in Office 365 SharePoint Online
• How to design multiple step forms using Nintex forms for Office 365 SharePoint Online?

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.

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

Download