Forum Academy Marketplace Showcase Pricing Features

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.io/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?

1 Like

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).

9 Likes

I just used this last night. Thanks very much for the write up!!

That’s a nice way to do this. Thanks for this hint.

Any idea how this could be used for a table?
Let’s say multiple fields and rows?
For example: First Name, Last Name, Telephone Number for three people that I want to add at the same time. I was unable to make that work.

Hey @flumbenjamin, welcome on the forum!

I’d say it depends what you want to achieve with the date after “importing” it into Bubble. Is the data going to be displayed/used elsewhere in your app or it will only be used in your HTML table?

Hey @julienallard1, thanks for the quick reply.

So I have used the HTML element to enter data for 3 contacts at the same time. Since I couldn’t find a way of taking the data from their into the bubble database. So I built the following:

  1. Use your javascript code to pull the information from the HTML table
  2. Set up a second table (repeating group) that receives the entries from the javascript code. From there I can read the results and save to the database.

But now I only managed to do this for one row of data, but can not figure out how to let javascript run through the entire table and also push that to the Bubble repeating group.
(The table row element is repeated x3 to allow entry of multiple entries at the same time, but I didn’t paste it here again).

<tbody>
        <tr>
            <td>
                <input type="text" id="firstname">
            </td>
            <td>
                <input type="text" id="lastname">
            </td>
            <td>
                <input type="text" id="telephonenumber">
            </td>
        </tr>
</tbody>

I used your javascript code for each input individually, but I am not really familiar, so I am not sure how to run a loop in javascript through all rows and also push that information into a repeating group for bubble.

var contact=$(’#firstname, #lastname,#telephonenumber’).val();
bubble_fn_readInput(contact);

Thanks a lot!

You could build a JS code that gathers all data into a single string separated with a special character.
Ex.: John#Smith#123-456-7890|Mike#Doe#890-432-1234 …

That string could then be passed to the Javascript to Bubble element. In your repeating group, set the type as text with the source toward the Javascript to Bubble with a REGEX extraction to convert it as a text list: Source: JavascriptToBubble's value:extract with regex....
In the regex value write: [^|]+. This will split the string using the “|” character as separator.

Now in every cell you can get the data this way: Current cell's text:extract with regex:item#...
1 for the first name
2 for last name
3 for phone number
This time the regex value should be: [^#]+ to use “#” as the separator.

Not very straightforward but I’ve done it a few times already.

2 Likes

Any idea how to save a photo using an html element?
I’m trying to use it to capture a users image after opening their camera with this:

I want to filter the reapeating group using javascript and I have two pages digital cv and vacancy and I have to match some attribute of it …when I click a button then it should display me filtered repeating group… and I am not able to show that filtered values into that repeating group using javascript bcoz not able to store table and its value in a variable …so that I can compare it please help me out!!!




getting this error

I want to filter the reapeating group using javascript and I have two pages digital cv and vacancy and I have to match some attribute of it …when I click a button then it should display me filtered repeating group… and I am not able to show that filtered values into that repeating group using javascript bcoz not able to store table and its value in a variable …so that I can compare it please help me out!!!

getting this error