Access current value of form select field before submission

I’m looking to access the current value of a select field on a Builder native form. I’d like to bind other text on the page to the currently selected value of the form, without needing to submit.

I’ve currently set up an action to be able to change some state value when the selection changes, but I can’t find a way to dynamically set the state value based on the actual selection – it appears I can only provide a fixed value.

The underlying desire for this particular use case is to allow someone to change the displayed time based on the selected time zone.

Screenshots or video link
component|628x500

@ericsv Great question, and yes, this is definitely possible.

In the event binding section you highlighted in your video, instead of using Set State, you will simply want to use the Custom Code section.

setstate

Within that custom code window, you will have access the to Builder state object, as well as the change event. You can then set the state to the event value and you will have access to that value throughout your Builder page.

By binding the value to another element on the page, and you can dynamically update your page based on the user input
enterName

Hopefully that helps!

Could you please elaborate on how to do get the value of the selected option in the select input?

@vadimch you can find a lot more info on state and actions in our developer docs here:

But essentially we are adding an action to the input that says, on the ‘change’ event, add the value of the input to a value in state. We then bind that state value to the text element on the page and voilà! If you have specific questions I can try to help, but otherwise I suggest taking a deeper dive into our docs for more info