Forum Documentation Showcase Pricing Learn more

How to save input from html element using javascript to bubble

Hi,

I’ve been struggling for days to understand the logic behind the Javacsript to bubble plugin.
Here is my very simple case: I just need to save in the database the value of a text input from an html element.
Inside the html element, I wrote the function to get the value of the input and then in the workflow, I call the function in the “run javascript” event.

https://bubble.is/page?type=page&name=collect_html_input&id=app0test&tab=tabs-1

I don’t know if there is a mistake in the function implementation (my Javascript knowledge is poor) or if the way I used the plugin is completely wrong (or, maybe both :sweat:).

I’m not sure to understand how the javascript to bubble element interact with the html element and with the workflow. Should I write the script in the html element or in the page header section?
Could you please explain the steps to follow (in the workflow and html element) to make it work?

Did you ever figure this out?

It’s fairly simple to do.

Do you know the plugin Toolbox?

Just made a little demo using the Toolbox plugin:

In the HTML block, I created an input with the id “yourname”.

In the top left corner of the page I put a “Javascript to Bubble” element which, as its name suggest make a bridge between the javascript code and the bubble interface. It creates a function named “bubble_fn_readInput” and makes it result visible to Bubble as text.

Clicking the button triggers a workflow a runs a javascript code. The codes simply reads the value of the input, using its ID and runs the function “bubble_fn_readInput” with the value as a parameter.

Just below, there is a text element that displays “Your name is:” + the result of the function (which is the parameter we just passed).