Nintex Forms - set Lookup value using javascript

  • 16 January 2020
  • 9 replies
  • 205 views

Badge +8

Hi guys,

 

I know this has been already talked about but I can´t seem to find the issue with my code.

 

I have the following function which takes a client id javascript variable (from nintex forms) and a lookup id and sets the control.

function setDropdownLookupValue(control, lookupId) {
  //If 0 is passed, use the SelectValueMask as option value to look for
  const option_value = lookupId > 0 ? lookupId : NWF.FormFiller.Functions.SelectValueMask;
  // Nintex selects a hidden input field when accessing the lookup via js variable
  const hiddenInput = NWF$("#" + control);
  // By replacing the _hid by nothing, the selector will give us the choice field
  const choiceId = control.replace("_hid", "");

  //"Unselect" each option in the dropdown
  NWF$(`#${choiceId} option`).attr("selected", false);

  //Store the correct choice field by value
  const choice = NWF$(`#${choiceId} option[value='${option_value}']`);
  //Select it
  choice.attr("selected", "selected");
  //Read data-nfchoicevalue which contains the value we want to set the hidden input to
  const hiddenInputValue = choice.attr("data-nfchoicevalue");
  hiddenInput.val(hiddenInputValue);
}

And I have a list which looks as follows:

Title : Id

Title Id
A 1
B 2
C 3
D 4
E 6

 

I then create a lookup column to that list and add it to Nintex Forms.

With my function, I can set the lookup field, until I want to set the lookup field again to the same value. So if I am running the following in Chrome Dev Tools

setDropdownLookupValue(lookup,1)

The value gets changed to the item with id 1 (A)

If I use the code to set the lookup to 2, the value gets changed to item with id 2 (B).

When I then want to reset it to 1, it changes to "Please select a value".

 

I could then set the lookup to any value which is not 1 or 2 (or other used ones), as the already "used" ones all point to "Please select a value".

If I click save, the value of A (id:1) is saved to the list item.

 

Anyone got an idea what I need to change to be able to select the same value again?

 

Thanks!

 

Nintex Forms Version: 

Nintex Forms 2013 ( 2.11.5.0)
 

9 replies

Userlevel 4
Badge +9

It looks like you over complicated things ;)
Just find the right option to select, and use "prop" and "change" (or blur) to push changes and trigger rules. You also do not have to work with the hidden control (_hid) :

NWF$('#' + control + ' option[value="MyValue"]').prop("selected", true).change()

"attr" is not really well supported.

Badge +8

Thank you so much allan, it works!

 

Edit:

For completeness, I now use the following function to set lookup controls.

I tried without replacing "_hid" but that did not work.

function setDropdownLookupValue(control, lookupId) {
  //If 0 is passed, use the SelectValueMask as option value to look for
  var option_value =
    lookupId > 0 ? lookupId : NWF.FormFiller.Functions.SelectValueMask;
  // By replacing the _hid by nothing, the selector will give us the choice field
  var choiceId = control.replace("_hid", "");

  //Select the correct choice value and trigger change
  NWF$(`#${choiceId} option[value='${option_value}']`)
    .prop("selected", true)
    .change();
}
Userlevel 4
Badge +9
Glad that you solved your issue.
I never had to work with the _hid, but maybe I was doing something differently.
The only thing you were missing was the ".change()" I suppose.
Badge +4

Hi @allan, I have a lookup field on my form that I can't update using your JS example. I have a form with a lookup control and an ID of "ntxLookup". I open the console and add this line:

NWF$('#'+ntxLookup+' option[value="Test"]').prop("selected", true).change()

It only returns the properties of the targeted field. No change is made to the lookup field.

Userlevel 4
Badge +9

@ms7 Have a look a the DOM (HTML) of your form, and try to see how it is constructed.
You can try to type in the console, and see if it finds something.

NWF$('#'+ntxLookup+' option[value="Test"]')

 Please note that this solution only works with classic forms.

Badge +4

@allan Thanks for replying. Yes it does find the object.

Badge +4

@allan Got it working 🙂

 

Interestingly, I had to use the class over the ID. I also use a contains on the option property:

NWF$('.ntxLookup option:contains('+value+')').prop('selected', true).change();

 

Userlevel 4
Badge +9
Glad you have it work 😉
Badge +4

Thanks for your help! 🙂

Reply