Conditional Defaults in Nintex Forms

One of the most asked questions I get is how to set the default value of a control on Nintex Forms based on the value of another control. Usually this is based on a Choice (drop down)  control. The following post will cover how to set those defaults in a Single Line Textbox control when using a Choice control with a drop down view.

The Build

Once you have opened up the Nintex Form Designer, please add the following controls:

  • Choice - settings as followed:

NOTE: Make sure you set the 'Store Client ID in JavaScript variable' setting to 'Yes', and then set the 'Client ID JavaScript variable name' to 'colorDrop'. Also, in this example I am using the three color choices of [Red, Green, Blue].

Single Line Textbox - settings as followed:

NOTE: Give the Single Line Textbox a 'Control CSS class' value of 'defaultTXT', or you can give the Single Line Textbox a JavaScript Variable name of the same value.

The Code

Super simple CSS this time! Just add the following to the 'Custom CSS' section of Forms Settings:

.defaultTXT{}

Next, we will use JavaScript / jQuery to grab the value of the drop down control and a switch to set the default value of the Single Line Textbox control every time the value of the drop down changes. Please insert the following JavaScript in the 'Custom JavaScript' section of Form Settings:

NWF$(document).ready(function() {   
    NWF$('#' + colorDrop).change(function() {
        var d = NWF$('#' + colorDrop + ' option:selected').val();

        switch (d) {
            case "Red": 
                NWF$('.defaultTXT').attr("value", "Red");
                break;
            case "Green":
                NWF$('.defaultTXT').attr("value", "Green");
                break;
            case "Blue":
                NWF$('.defaultTXT').attr("value", "Blue");
                break;
            default:
                NWF$('.defaultTXT').attr("value", "Please select a color!")
        }
    });
});

The Result