How do you set a default value on a Lookup Control for Nintex Forms

  • 29 June 2016
  • 3 replies
  • 43 views
D
Badge +5

I have a couple of lookup controls on a form.  The default behavior is to have some text that displays, "Please select a value...".  My users want me to default to the first item in the list.  Through searching the community site, I found that there isn't a property I can set and that I would have to do something via Javascript.

When I do the code to select the control, I get an error trying to set a value to the first one.  Through some investigation, it appears that Nintex Forms renders a SELECT and and INPUT with the same ID.  When you do a select through the javascript $NWF("#" + ddlShipVia), the type of control that comes back is INPUT, not SELECT.  When I look at the HTML source, I see the following structure for a lookup.

<div formcontrolid="4af0658e-cbbc-438d-afbe-c27a2ad8068e"

  data-controlname="ShipVia"

  data-uniqueid="c0a89c70-0781-4bd4-8623-f73675005e15"

  data-controlid="4af0658e-cbbc-438d-afbe-c27a2ad8068e"

  data-formcontroltypeid="c0a89c70-0781-4bd4-8623-f73675005e15"

  data-enabled="True">

  <div class="nf-filler-control-border">

  <div class="nf-filler-control-inner">

  <div>

  <span id="ctl00_ctl41_g_91b5f1e3_92bd_4d83_8d14_a26b5dce3b8d_ctl00_ListForm2_formFiller_FormView_ctl06_ctl40_ctl28_lookup4f2e3949_0f86_425e_b950_d0251de74300"

  title="{help text}">

  <div class="nf-lookup-loading nospinner" data-bind="css: { nospinner: hideLoadingSpinner }, visible: isLoading" style="display: none;">Loading...</div>

  <select

id="ctl00_ctl41_g_91b5f1e3_92bd_4d83_8d14_a26b5dce3b8d_ctl00_ListForm2_formFiller_FormView_ctl06_ctl40_ctl28_lookup4f2e3949_0f86_425e_b950_d0251de74300_Lookup"

  formcontrolid="4af0658e-cbbc-438d-afbe-c27a2ad8068e">

     <OPTIONS>.......</OPTIONS>

  </select>

  <input name="ctl00$ctl41$g_91b5f1e3_92bd_4d83_8d14_a26b5dce3b8d$ctl00$ListForm2$formFiller$FormView$ctl06$ctl40$ctl28$lookup4f2e3949_0f86_425e_b950_d0251de74300$Lookup"

  type="text" id="ctl00_ctl41_g_91b5f1e3_92bd_4d83_8d14_a26b5dce3b8d_ctl00_ListForm2_formFiller_FormView_ctl06_ctl40_ctl28_lookup4f2e3949_0f86_425e_b950_d0251de74300_Lookup" ...>

  <br>

  </span>

  </div>

  </div>

  </div>

</div>

How do I select the "SELECT" control if the ID on the SELECT and INPUT are the same?

I tried to iterate through the options by using $NWF("#" + ddlShipVia > OPTION) but I get an error that there is no OPTION.  It's true because the type of control that is returning from the jQuery selection is an INPUT.

Any ideas?

3 replies

F
Userlevel 6
Badge +16

If you want to paint in blue your SELECT, use this

$('SELECTt[id="ctl00_ctl41_g_91b5f1e3_92bd_4d83_8d14_a26b5dce3b8d_ctl00_ListForm2_formFiller_FormView_ctl06_ctl40_ctl28_lookup4f2e3949_0f86_425e_b950_d0251de74300_Lookup"]').css("background-color","#0000ff");

If you want to paint in blue your INPUT, use this

$('INPUT[id="ctl00_ctl41_g_91b5f1e3_92bd_4d83_8d14_a26b5dce3b8d_ctl00_ListForm2_formFiller_FormView_ctl06_ctl40_ctl28_lookup4f2e3949_0f86_425e_b950_d0251de74300_Lookup"]').css("background-color","#0000ff");

D
Badge +5

Brad - The problem I am experiencing is that when I use the JavaScript variable to select the control, it always returns an INPUT type and not a SELECT type.  That means that there are no "indexes" selected.  I tried to log all options to the console and received an error that there are no OPTIONS even though I can see the options in the source.  I think the problem comes when Nintex assigning both the SELECT control and the INPUT control to the same ID.  For that matter, I don't know why the lookup control is rendering both a SELECT and INPUT.  It should only render a SELECT unless a different format is configured. 

Fernando - your solution works as long as the control name/id never changes.  If the control name ever changes, it will break the code.

The strange behavior is that after the page renders and I start interacting with the form, I can go into the debug tools of the browser and when I use the NWF$("#"+ddlShipVia), it does select the SELECT control and not the INPUT control.  It is only initially that the control selected is the INPUT.  I'm trying to figure out now when that changes.  I have also submitted this question as a support request.

D
Badge +5

I finally got it working.  The key came from Brad's code with an addition.  The RegisterAfterReady is necessary but then I also had to hook into the "Change" event of the control.  I think this is because of the way lookups are rendered first as a text box then as a select.  Anyway, here is the code that finally worked for me.

NWF.FormFiller.Events.RegisterAfterReady(function(){

            var ddlShipVia = NWF$("#" + tbShipVia);

            ddlShipVia.on("change", function(e){

                if(e.originalEvent == undefined) {

                    if(this.value==""){

                        this.selectedIndex = 1

                    }

                }

            });

});

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings