Question

Get the selected value from a dropdown in a custom html field and add to a single line field

Laserfiche Laserfiche Cloud Forms Layout Designer

Updated May 21, 2024

asked on May 20, 2024

Hi,

I have a dropdown in my custom html element which calls a function in the JS sandbox.
This works fine, but I am not sure how to access the event details so I can get hold of the value that was selected.

What I want to do:

Select an option from an html <Select> element

An onchange event is run in JS
Get the value of the selected option in the dropdown box
Put this value into a field on the form

This is in my custom HTML

</SELECT>

This is my JS:

window.doSomething = async function (event) {

var selectedValue = event.target.value;

LFForm.setFieldValues( {fieldId: 40}, selectedValue);

}

The event is called when an item is selected but I don't know how to get the selected value. Any help greatly appreciated.

Thank you :)

0 0

Replies

replied on May 20, 2024

Unfortunately, I don't believe enough information is passed from the custom object into the Javascript sandbox to do what you are trying to do.

Is there a particular reason you want this to be via a custom Select element instead of a built-in one?

P.S. You can use the "{...} code" button here in LFForms to make your code snippets easier to read.

1 0

replied on May 21, 2024

Hi Matthew,

Thank you for your reply.

I am using an API that runs off a rule on a form to populate the dropdown box dynamically. I can't find a way to do this with the built in Laserfiche Dropdown. I am not sure how I populate a standard dropdown with an array.

I tried putting the data into a table on the form to save to a lookup table, to then get picked up by the dropdown but couldn't get this working. Any suggestions of how to use either the html dropdown or LF built in one to display a dynamic list I can select from (and retrieve that selected value) would be greatly appreciated :)

0 0

replied on May 21, 2024

Since you indicated that you are on Cloud, this might not be possible yet in the Modern designer.

Self-Hosted environments received a new function in Version 11 Update 5 in December 2023, LFForm.changeFieldOptions - this allows the ability to change the options that are available in checkboxes, radiobuttons, and dropdown fields. At the time, we were told it wasn't yet available in Cloud. I'm not certain whether or not is has been added to Cloud yet, but it is not listed in the help documentation for Cloud, so I'm guessing probably not (compare the self-hosted help documentation and the Cloud help documentation).

Hopefully that function is added to Cloud soon if it isn't already. One possible alternative in the time being, would be to use the autoCompleteValues on a single line field instead of an actual drop-down field, which can be populated via the LFForm.changeFieldSettings function (see Cloud help documentation). Though, there are functionality differences with this versus a drop-down, so it may not meet your needs.

Hopefully, as the Modern Form Designer continues to be developed and enhanced, we'll get the ability to pass values from a custom HTML element into the Javascript sandbox the way you are trying to, and Cloud will receive the LFForm.changeFieldOptions function as well, but for the time being, it just may not be possible.

Though, maybe someone much smarter than me will respond with more information.

0 0

replied on May 21, 2024

Thank you so much for taking the time to explain, that information is really useful.

I will have a look into the autocomplete but if that doesn't work I will leave it until a further update to the LFForm Object. I will keep a look out for the changeFieldOptions.

0 0

You are not allowed to follow up in this post.

Question

Question

Get the selected value from a dropdown in a custom html field and add to a single line field

Replies

Sign in to reply to this post.