Forum Documentation Showcase Pricing Learn more

[SOLVED] Get data from HTML Element

Hi, what’s the best way to retrieve data from an HTML element? Say I have an html text input or datalist. How can I put the data into a custom state or get it form a workflow? Or trigger a workflow from an event that happens from HTML element content?

It’s easy to pass data from Bubble to HTML element from “Insert Dynamic Data”, but can’t figure out how to pass data from HTML element to Bubble.

Thanks in advance for any help!

Hey @julienallard1,

How about this?

You have an HTML element with an input that has an id attribute:
06%20AM

You then use the Javascript to Bubble element from the ever-so-useful Toolbox plugin setting up a function which will be called in the next step:

Then run this javascript in your workflow:

bubble_fn_thisInput(document.getElementById('thisInput').value);

You can then set your custom state:



Looking to accelerate your app development?

Let me turn
:thinking: :tired_face: :confounded:

into
:grinning: :sunglasses: :woman_student:

Development through Coaching at https://uniqueideas.com or schedule a free intro session :gift:

Ken Truesdale
LinkedIn

2 Likes

Just tried it. It’s exactly what I was looking for.
It would be nice to have a built-in function that could be called directly inside the HTML element allowing to set custom states.

Thank you very much for your help!

1 Like

I believe you could also just do this on a Expression element (also from Toolbox) and skip the custom state. (Value of the input will magically be found in Expression’s value. It’s basically a JS function with a built in state.)

The way I ended up using is to insert a scritp tag in my HTML element calling a function bubble_fn_a declared in a Javascript to Bubble element and passing it data. I can then refer to it in any other element.

1 Like

can this be done with contentEditable?
im having some problem
https://bubble.io/page?name=index&id=contentedit&tab=tabs-1 ,

Hi @julienallard1,

Would you be willing to go into a little more detail on what a script tag looks like and how you used it?

I’m using this solution that is working great, but I need to extract current variable values, and to know when the javascript is in action to prevent other actions.

Thanks,
George