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:
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:
Let me turn
into
Development through Coaching at https://uniqueideas.com or schedule a free intro session 
Ken Truesdale
LinkedIn
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!
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.
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…
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
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
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.
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…