Forum Academy Marketplace Showcase Pricing Features

[SOLVED] Get data from HTML Element

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

5 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>
2 Likes

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…

Hello @julienallard1 ,

This is a good solution. I have one challenge though, I need this to function when the run in iframe property on html element is checked. Do you have any idea how i could go about this?

Regards

That is a good question since iFrames can’t access the parent page. It turns out that there is a way to pass data with window.postMessage(). The page must have an event listener for MessageEvent to receive data from the iFrame.

This is currently all the time I have to help. You can find more info on MDN Web Docs

Thanks for help @julienallard1, this has worked for me.

1 Like

@mebeingken

How to trigger that javascript i mean , can we trigger that function from on change value of a html element. I have html element with input date/time and on select of value from date and time I want to trigger another action.

Thank you

@mebeingken
To run this javascript which event you used?

You have to set an event listener for value change on that input. For example:

// Here I suppose it's a «datetime-local» input that you use, but it can be any types.
<input type="datetime-local" id="date-time">

<script>
    // Sets a listener for any input that changes in the page.
    // When this happens, the function is triggered with the argument «ev», which is the data about the event.
    // «ev» contains the element for which the event happened («ev.target»).
    document.addEventListener('change', function(ev) {
        const element = ev.target;

        // Since change events can happen on any inputs, the following statement acts as a filter;
        // if the ID of the input that changed is not «date-time», stop the execution of the function.
        if (element.id !== 'date-time') return;

        // Here you can put any code for what you want to do with the data;
        // You could manipulate/transform the data before passing it to a Javascript2Bubble element.
        // The following statement passes the value of the «date-time» input to Bubble.
        bubble_fn_hey(element.value);
    });
</script>

@mebeingken
Can you share example for html element with inputtype= time or date&time where i will get updated value after change in value for that element. Also how can we have event listener for the element , i have tried below javascript code

document.getElementById(“starttime”).addEventListener(“change”, (event) => {
bubble_fn_eventStartTime(document.getElementById(‘starttime’).value);

});

but some how it is not working , giving error for custom code.
Is this the only way to handle this event for html element?

I highly recommend bubblers who are beginning to use JavaScript in their Bubble apps to try ChatGPT first.

The community is great, super great, but sometimes it will take a while to get an answer or not at all (especially when you have very vague questions).

I’ve been doing this since the the start of it’s public preview and it hasn’t failed me yet. More likely because I’m asking for pretty straight forward solutions and pieces of code.

@julienallard1
Can I just copy paste this javacsript code in toolbox plugin?

This javascript code is wrapped within an HTML script tag and is intended to be used in a Bubble HTML Element.

The toolbox plugin is used to pass data from custom HTML to a workflow…

@julienallard1
Thank you… Yes it is working fine… Now on change of input value , the function is getting trigerred, and getting latest value.


In below screnshot i have bubble function which returns “text” for Start time . So

So storing it in custom state of type text.

Next I want to achieve is , I have one more html component with input type="time"
where i want to show session start time + 1 hour. And if user changes it manually then calculate accordingly.


So what i was trying to convert that text to Date using Expression and then perform equations.

But some how this expression plugin is giving different errors. right now i got this below error.
The plugin Toolbox / element Expression threw the following error: ReferenceError: date is not defined
at eval (eval at (PLUGIN_1488796042609x768734193128308700/Toolbox-update–Expression-.js), :1:1)
at eval (PLUGIN_1488796042609x768734193128308700/Toolbox-update–Expression-.js:3:66) (please report this to the plugin author)

So can you guide me with this how to read valur of one element and perform actions on that.

Can we just one line of code to convert this text to date format while calling the function?