[SOLVED] Get data from HTML Element

Questions
9

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>
3 Likes