How to access values from custom HTML forms?

Anvil Q&A
1

What I’m trying to do:
Since I cannot figure out how to implement just a time picker component (I saw a datetime component, but I do not need datetime, I just need time), I am using a custom HTML form where I’ve created a custom time picker along with a couple of drop down boxes. I’ve added the custom HTML form as a component and I’ve dropped the component into my main form, but I don’t know how to access the values from the dropdown box and time input html inputs. I also don’t see very clear instructions that would help me with this in the documentation.

What I’ve tried and what’s not working:
I’ve looked through the documentation, but I do not see anything that explains how to do what I’m trying to do.

HTML code Sample:

<label for="event_time_input">Input Time</label>
<input type="time" id="event_time_input" name="time_input">
<label for="duration_input">Duration (minutes)</label>
<select id="duration_input>
    <option value="ten_minutes">10</option>
</select>

How do I access the input forms from this custom html component from my main forms?

2

Welcome to the forum!

Here’s an example component that does keyboard time entry: Simple time entry field

It provides a time property that can be used to fetch the time the user enters. You can look through the code and see how the time property is implemented.

The docs on custom component properties may also help: Anvil Docs | Custom Components You get to the dialogue they show there by clicking the three dots next to the component and choosing Configure Component.

3

Thank you for the response. That time component example seems a little too complex. Also, I don’t know what you mean by “clicking the three dots next to the component”. Where are these three dots?

In regards to my question, do you know how I can access the input fields of the HTML custom component I made?

4

image

If you mean actually get to the custom HTML controls, you’d use the Javascript bridge to do that. Anvil Docs | Accessing JavaScript

1 Like