Skip to main content

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?

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");

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.

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