How to correctly set dropdown value using JavaScript?

[amal_abey]

I am using Nintex Forms 2013 to develop a form. I have a drop down field (financial year). Once the page is loaded, I need to select the current financial year as the default one. I make a REST api call to get the current financial year and set it to the dropdown on "NWF.FormFiller.Events.RegisterAfterReady" event. The below code worked until last week.

var fyValue = ko.dataFor(NWF$("#" + ddlFYLookupId)[0]);

fyValue.selectedItem(currentYear.Value);

I upgraded the Nintex Forms to latest version today, and now above doesn't work. Can someone please help me how to do this in forward compatible manner?

[emha]

to set default value during form load you should rather use

fyValue.initialValue = currentYear.Value;

however, I'm not sure whether it still works with recent changes of lookup functionality

[amal_abey]

Thanks Marian! But the problem with the newer version is that ko.dataFor(NWF$("#" + ddlFYLookupId)[0]) is undefined.

And even with the previous version, fyValue.initialValue didn't work because by the time my REST call to get the financial year completes, the dropdown was already filled with values and didn't consider initialValue.

Regards,

Amal

[#4]

Hi Amal,

could you solve your problem? I'm in the same situation and can't get it to work.

Regards,

Michael

[amal_abey · Accepted solution]

Hi Michael,

Unfortunately, No. I just reverted back to the older version, in which below works:

var fyValue = ko.dataFor(NWF$("#" + ddlFYLookupId)[0]);

fyValue.selectedItem(currentYear.Value);

Amal

[sojanm]

I am also having the same problem, updated from 2.9.0.0 to 2.9.3.0 and my functions stopped working.

function SetValueOnLookupControl (jvarCtl, CtlValue)
{

var yourControl = NWF$("#"+ jvarCtl);
var value = yourControl.find("option[title='" + CtlValue + "']").attr("value");
yourControl.val(value);
yourControl.parent().find("input").val(value);
NWF.FormFiller.Functions.ProcessOnChange(yourControl);
}

Is there any technical doc or SDK for the new release. Kind of stuck now.

[xMikeX]

Hi guys, because Nintex is an ever evolving product, I'm not sure the "JS" tricks we can do at the moment will ever be "future-proof".  You'll see in release notes sometimes warnings about "JS" may have been changed or affected by an update.  I'm going to mark this closed out for the solution that worked at the time of the posting.

[annhwallinger]

Since we  upgraded to Forms version 2.10 (from an older version like 2.5) we have had a lot of trouble with this. The following code works for me but it isn't as clean as I would like it to be so if anyone has a suggestion for improvement, JS is not my specialty! There are two issues in my opinion:

1. I'm not able to catch the change event of the child control as I should be. I have to trigger the change from the parent manually
2. When the change happens it is too fast so I have to put in a delay loop to wait for the DDL to load completely. Seems like there should be a better way.

As I said, it works, it is just a little ugly. Note  that if you are not dealing with the parent/child relationship you can hardcode  default value really easily:

NWF$(document).ready(function() {
 NWF$("#" + myddl).val('3');
});

Here is the parent/child one:

NWF$(document).ready(function() {
 NWF$("#" + ddlParent).change(function () {       
  NWF$("#" + ddlChild).change();        
 }); 
   
  
 NWF$("#" + ddlChild).change(function () { 
  var ddlChildId = ddlChild.substring(0, ddlChild.length -4); 
  var len= NWF$("#" + ddlChildId ).find("option").length;      
  if(len>=2) {

 return delay(1000).then(function() {
   NWF$("#"      + ddlChildId).prop('selectedIndex',1);
   NWF$("input#" + ddlChildId).val(NWF$("#" + ddlChildId).find("option")[1]); 

});
  }
  else {
       while(i<10 && len==1) {
       i++;        
          return delay(1000).then(function() {
           len= NWF$("#" + ddlChildId ).find("option").length;
           if(len>=2) {
            NWF$("#"      + ddlChildId).prop('selectedIndex',1);
            NWF$("input#" + ddlChildId).val(NWF$("#" + ddlChildId).find("option")[1]);      
           }
          });        
   }
  }            
 });

 function delay(t) {
  return new Promise(function(resolve) {
   setTimeout(resolve, t)
  });
 }
});

[jpmhuls]

Hi Mike,

Of course it's great Nintex continuously improves their products. But would it be possible to:

1. with new/major updates provide a list of controls which are affected with regards to custom JavaScript? Even better if you could describe for common actions what the new custom js would look like.
2. obviously from the posts in this and other forums there seems to be a customer requirement for additional control functionality.

[jpmhuls]

Today I figured out a way to set a lookup dropdown list using JavaScript with only a few lines of code and working in NF 2013 2.10.0. As a base for the code below I created a form with 2 lookups to a Currency list. Goal is to set the selected dropdown value of the 2nd one with the selected value of the 1st:

// First Dropdown - has JavaScript Client ID jsCurrency

var currencyCtrl = NWF$("#" + jsCurrency);

var currencySelection = currencyCtrl.val();                                                                          // Result as lookup string, e.g.  : 1;#EUR

var selectedCurrency = NWF.RuntimeFunctions.parseLookup(currencySelection,true);    // Lookup value itself                : EUR

// Second dropdown - has JavaScript Client ID jsSecondCurrency

var secondCurrencyCtrl = NWF$("#" + jsSecondCurrency);                                                        // this returns the input element

var selectCtrl2Id = jsSecondCurrency.replace('_hid','');                                                               // determine id of select element

var selectElement = NWF$("#" + selectCtrl2Id); ;                                                                        // this returns the select element

NWF$("#" + selectCtrl2Id + " option:contains(" + selectedCurrency +")").attr("selected", true);  // set select to specific lookup value

secondCurrencyCtrl.val(currencySelection);                                                                                // also store lookup string in input element

As mentioned this works now in two different libraries.