Populate Fields Based on DropDown Selection

Hi everyone.

I suspect that as soon as I click submit, I am going to have a eureka moment and realise the errors in my ways.

What I am trying to do is populate 2 fields, based on a selection made from a drop down.
For example, the drop down contains a serial number, depending on the one chosen, it will populate a field containing a data and a unique number.

In this case, I need to reference the date and unique number back to the serial.
So if serial 1 is selected, display date1 and unique1, if serial 2 selected, display date2 and unique2

Should I create a db table just to achieve this or that over kill.

I have read the How do I build a select drop-down, radio button or checkbox group? documentation which left thinking 😲
Maybe I am not fully understanding the syntax.

Off to a dark room, then start again.

Simon

HI Simon,

Please see this FAQ - I think that may be a useful start.

Bob

Hey Bob,

I think I ran into a problem.

Using the example in the link, I copied the code and made a couple of changes

<select name='dvm_list' id='dvm_list'>
<option id="hide_none1" value="Fluke 87B" data-serial='12345'></option>
<option id="hide_none2" value="Fluke 88B" data-serial='23456'></option>
</select>

I have put that code into the Options of a Drop Down field, click apply, then save the form.
When I go back and edit the the field, the code in the Options is now:

<select name='dvm_list' id
<option id="hide_none2" value
</select>=

In the front end, the field is displayed, but with options of 'dvmlist' id and "hide_none2" value.

I added Load JS to On Load and used following code:

window.addEvent('domready', function() {
  $('serial_no_container_div').hide();
  $('dvm_list').addEvent('change', function() {
    var opt;
    opt = this.getSelected().getProperty('data-serial').toString();
    if ( opt.length > 0 ) {
      $('serial_no').value = opt;
      $('serial_no_container_div').show();
    } else {
      $('serial_no').value = '';
      $('serial_no_container_div').hide();
    }
  });
});

I presume I have added the data serial attribute in the correct place, as I can't see any other place logical for it to go.

Attached is a screengrab of the front end with code inspect.
It does look like the text field is correctly hidden, which is not unhidden when an option is selected, probably due to the code not saving probably.

Hey Bob,

FacePalm!

OK, that funnily enough now works🙂
Except that the options text is not displayed in the drop down, but the text field updates correctly.
Almost there.

Will get to the bottom of that.

Many thanks.

Simon

Hi Simon,

You need some text between the option tags:

<option . .>XXXXXX text here XXXXXXX</option>

To get the second value you can either add another data- attribute e.g. data-date='xxx' or you could combine the two elements in the current attribute and break them apart again in your JavaScript e.g. data-serial='xxx#zzz'

Bob

Hey Bob,

Perfect, adding text to the option worked🙂
I added several options, all data-serial and did not need to combine the elements or split them in the js.
Selecting an option from the drop down unhides the div and shows the correct data, so all is good, even got that pulled into a pdf too.

Thanks again.

Simon