Append value from dropdown control to text field input

  • 14 January 2017
  • 9 replies
  • 19 views

Badge +3

I have a form with 15 Measurement input fields (text) plus a single dropdown Measurement unit (choice) containing measurement units (mm, cm, dm, m etc).

The user first selects the desired Measurement unit value, then inputs a measurement result in a Measurement field. On changing focus to the next field, the currently selected value in the Measurement unit field should be appended to the first field's contents.

How can this be achieved using Javascript?


9 replies

Userlevel 5
Badge +14

try following

NWF.FormFiller.Events.RegisterAfterReady(function() {
   NWF$('#'+varMeas1).focusout(function(){
       this.value += NWF$('#'+varMeasUnit).val();
   })
})

varMeas1 and varMeasUnit are javascript variables assigned to respective controls

Badge +3

Dear Marian, thanks very much, even on paper this looks very much like the solution I needed!

As I'm not a developer, can I ask you for some more help in getting this to work? My questions:

1) Where do I put the script? Do I copy it as-is or does it need further markup?
UPDATE: I got it working by putting it in Form settings/Advanced/Custom Javascript, so the location/markup question is answered I think.
However, it is not appending the text of the selected item in the dropdown, but instead, a number - which I believe is the index of the item in the dropdown list. What do I need to change to get it to append the text instead of the index #?

2) How do I change the script so that it works for all 15 measurement fields? Your code now works for only a single control (ID = varMeas1).

Your help is very much appreciated! Kind regards, Robert

Userlevel 5
Badge +14

I got it working by putting it in Form settings/Advanced/Custom Javascript

yes, that's correct place.

it is not appending the text of the selected item in the dropdown, but instead, a number

it should return the text itself, as far it really choice-type control as you describde.

can you post screenshot of meas. unit control configuration and example what result do you get from script?

How do I change the script so that it works for all 15 measurement fields? Your code now works for only a single control (ID = varMeas1).

yes, it sets just first measurement control, as per your original request.

for so many controls it needs slight change to be written effectively. I'll wait for you clarification for above and then  post all needed changes together so that you are not confused by many scripts.

Badge +3

Turns out my Measurement unit form field is in fact a lookup field into a config list containing the measurement unit values. That's why your function call returns a number of course, it being the item ID of the selected value in the lookup. I would prefer to keep the lookup mechanism but if that overly complicates things scriptwise, I can change the field to an actual choice field.

Userlevel 5
Badge +14

 Turns out my Measurement unit form field is in fact a lookup field

yeah, I thought so once you wrote you get a number....

I would prefer to keep the lookup mechanism but if that overly complicates things scriptwise, I can change the field to an actual choice field.

it's not much more complicated, it's just a bit different...


so your script should look like

NWF.FormFiller.Events.RegisterAfterReady(function() {
   NWF$('.MeasurementClass').focusout(function(evt){
       var measUnitText = NWF.RuntimeFunctions.parseLookup(NWF$('#'+varMeasUnit).val(),true);
       if ( !(evt.target.value == "") && !evt.target.value.match(new RegExp('.*'+ measUnitText  +'$'))){
           evt.target.value += measUnitText;
       }
   })
})


varMeasUnit is control's javascript variable just like above
MeasurementClass is 'CSS class' of all the measurement value control's

as a bonus I've added checks so that measurement unit is not appended if there is no measurement value or if measurement unit is already in there wink.png

Badge +3

Thank you so much. I've implemented it, it *almost* works: instead of the measurement units getting appended, I get [content] + 'NaN', see screenshot. Something not quite right with the lookup...?

 

Userlevel 5
Badge +14

what form version are you on?

provided solution works on 2.9.3.1. it looks like you are on an older version where lookups behaved a bit differently.

Badge +3

Userlevel 5
Badge +14

ok, so for older forms versions following should work

NWF.FormFiller.Events.RegisterAfterReady(function() {
   NWF$('.MeasurementClass').focusout(function(evt){
     NWF.RuntimeFunctions.SPLookup('MeasurementUnitsList','ID',NWF$('#'+varMeasUnit).val(),'MeasUnitColumn').done(function(data){
        var measUnitText  = data;
        if ( !(evt.target.value == "") && !evt.target.value.match(new RegExp('.*'+ measUnitText  +'$'))){
          evt.target.value += measUnitText;
        }
     });
   })
})

update MeasurementUnitsList and MeasUnitColumn accordingly.

Reply