Setting a Dropdown List Lookup using JavaScript for Nintex Form

  • 16 October 2018
  • 2 replies
  • 52 views

Badge +5

Thought I'd share this because it stumped me for a while. Seemed everyone had little bits and pieces most all different which worked for them.

The example below is using a calculated field (LocationCalcVal) with a value for Location. There is also the drop-down list lookup control (LocationLookup) which contains a list of locations from another list on the site.

  1. Add the following code to Custom JavaScript in the Nintex Form settings.
  2. Ensure you have a Client ID JavaScript variable name defined for your drop-down list lookup control. Also your calculated value. Control Settings, Advanced. Set Store Client ID in JavaScript variable to "Yes". Then provide variable name. E.g. Advanced Control Settings
  3. Change LocationCalcVal to the JS Client ID that you have set for a calculated value control which contains the value you want to set. Alternatively you can manually specify the value e.g. var mySelectValue = "My Drop-Down List Item";
  4. Change LocationLookup (2x) to the JS ClientID that you have set for your drop-down list control.

NWF.FormFiller.Events.RegisterAfterReady(function(){       
    setTimeout(function () {
        var mySelectValue = NWF$("#" + LocationCalcVal).val(); //Get value from calculated field. Your select option value, should exist in lookup list.        
        var myControl = LocationLookup.replace('_hid','');  //Get drop-down list lookup ID from ClientID from setting on control.
        var selectElement = NWF$("#" + myControl);
        if (mySelectValue == "")
        {
            //If value is blank select the first item in dropdown list.
            NWF$('#' + myControl)[0].selectedIndex = 0;
        }
        else
        {
            NWF$("#" + myControl + " option:contains(" + mySelectValue +")").filter(function(){return $(this).text() === mySelectValue; }).attr("selected", true); //Select item in drop-down list where item matches your value.
            var myControlVal = NWF$("#" + myControl).val(); //Get value from current selected item.
            var myControl = NWF$("#" + LocationLookup);  //Get drop-down list lookup ID from ClientID from setting on control.
            myControl.val(myControlVal); //Set drop-down list value. For when the item is saved otherwise it will save an empty value.
        }
    }, 500);
});

When the form loads after the Timeout, the code will select the value in the drop-down list lookup. Then set the control value to the selected item.


2 replies

Badge +5

Hi Shane, Good article.  Here is recommendation to add/update.

Potential Issue - If the value is 1:00 AM you could get 11:00 AM.

NWF$("#" + myControl + " option:contains(" + mySelectValue +")").attr("selected", true); //Select item in drop-down list where item contains your value.

Add the filter with a function to get matched values. 

NWF$("#" + myControl + " option:contains(" + mySelectValue +")").filter(function(){return $(this).text() === mySelectValue; }).attr("selected", true); //Select item in drop-down list where item matches your value.

Note: The above has been validated Forms 2013 v2.10.0

Badge

Hi,

 

It's very easy to do :

//YourControl class must have the same name as your control 
var selectField = NWF$('.' + 'YourControl select'); //YourIndex has to be a number selectField[0].selectedIndex = YourIndex;

Arthis

Reply