Forum Academy Marketplace Showcase Pricing Features

[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

3 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

Hello @annon65040322,

Did you find a way to do for the contentEditable ? or any one can help me with this ? I am stuck on how to do it

I have a span with contentEditable and an id but it doesnt work.

Regards,
Shubham Desai

hey @gnelson , I just realised I never answered to your post… I, myself, hate when someone gets helped to find a solution but then doesn’t dare to share it haha!
You probably don’t need an answer anymore, but for the sake of sharing solutions, here it goes…

Since the time of my post, I found a simpler solution that doesn’t require a script tag. Instead I call up a Javascript to Bubble element directly from the HTML input like so:
<input type="text" oninput="bubble_fn_myFunc(this.value)">

While the oninput make the interface more snappy since the input’s value is updated every time the user presses (and release) a key, it is only good for client side subsequent actions (no database interaction).
If the goal is to imitate the auto-binding feature of Bubble where user inputs are saved automatically in the database. You should replace oninput by onchange. So instead of sending a database request every time a key is pressed, it will only fire once the input looses focus and then content has changed.


About HTML tags with contentEditable attribute:
Follow the same logic than with the input, but rather than passing the value, we’re passing it it’s innerText like so:
<p contentEditable oninput="bubble_fn_myFunc(this.innerText)">

Please be cautious with how you handle the content of the innerText if you intend to re-display it’s content elsewhere in your app, as the user could inject custom javascript tags…

Unlike the input tag, there is no onchange event called when a contentEditable was modified. If you want to save the result in the database, like I explained above, you should never do it on a “per-key-strike” basis.
If such solution is needed, I suggest to use a function that sets a countdown before saving (like 3 seconds). The function would be called on every key strike, but when called, it will cancel any previous existing countdown that hasn’t completed. This way you get an auto-saving feature that won’t bomb the database with save requests:

<p contentEditable oninput="save(this.innerText)">
<script>
    var countdown;
    function save(txt) {
        clearTimeout(countdown);
        setInterval(() => {
            bubble_fn_myFunc(txt);
        }, 3000);
    }
</script>

Hey sorry that I didn’t replied. I guess I skipped the notification…

you and @shubham can have a look at my previous post, it contains a solution for contentEditable…