Additional data-attributes to option elements

Hi,

I’m sorry, but that is not possible in the current version of the plugin, however, you can enter as the text of the choices, a span tag with the custom attributes:

<option value="100"><spam data-foo="bar" data-john="doe" data-bla="some text to work with">Lorem Ipsum Dolor</span></option>

Best regards.

thanks but the output gets messed up then:

<option vt=”<span data-foo=’bar’ data-john=’doe’ data-bla=’some text to work with’>Lorem Ipsum Dolor</span>” value=”20″>Lorem Ipsum Dolor</option>

Hi,

Could you send me URL to the webpage where the form was inserted, please?

Best regards.

sure

ok. seems like option tags cant contain any other html tags. Do you have any other idea? I badly need this option somehow. My head is about to explode… :/

Hi,

I’m sorry, my mistake, to use the spam tag as the text of the choice, should be used other type of control, for example, the radio button field, but not a Drop down. My apologies.

Best regards.

Well, I got about 100 elements. An other control field makes no sense here. Isnt there any other possibility to hack and crack it up to get it work somehow?

Hi,

Could you tell me how are used the additional attributes in the option tags, please?

Best regards.

I want to populate option values based on url params as Ive descibed here already.

Now my option values e.g. look like this:

<option>The best massage you ever had – 90 minutes – 100 Euro</option>

What I need are seperate values for this option to work with them:

<option data-sectionid=”1″ data-massageid=”5″ data-massagetitle=”The best massage you ever had” data-massagetime=”90 minutes” data-massageprice=”100 Euro”>The best massage you ever had – 90 minutes – 100 Euro</option>

The section- and massageid are values I want to get from url to preselect the options. The other values are for building a preview of an voucher to dynamical fill html tags with them.

Hi,

In reality it is not possible to define the additional attributes of the drop down choices through the forms builder, however, you can get it with some additional code.

For example, if you add a custom class name to the field, for example: “my-field”, through the attribute: “Add Css Layout Keywords”, and then inserting a “HTML Content” field in the form, with a code similar to the following one, as the field’s content:

<script>
custom_attr = [
{sectionid:1,massageid:1,massagetime:'qwerty',massageprice:'asdfg'},
{sectionid:2,massageid:2,massagetime:'sdfgsf',massageprice:'sdfgs'},
{sectionid:3,massageid:3,massagetime:'cxvbx',massageprice:'rtert'}
];

fbuilderjQuery(document).one('showHideDepEvent', function(){

var $ = fbuilderjQuery;
$('.my-field option').each(function(index){
var e = $(this);
if(typeof custom_attr[index] != 'undefined' )
{
e.attr('data-sectionid', custom_attr[index]['sectionid']);
e.attr('data-massageid', custom_attr[index]['massageid']);
e.attr('data-massagetitle', e.text());
e.attr('data-massagetime', custom_attr[index]['massagetime']);
e.attr('data-massageprice', custom_attr[index]['massageprice']);
}
});
});
</script>

Best regards.