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 
).
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?
1 Like
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).
11 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:
- Use your javascript code to pull the information from the HTML table
- 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.
4 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
@julienallard1 That solution works very well, however i can’t save javascript to bubble’s value to database (it prints just fine, just won’t save to the database) Can you save it on your page?
Nevermind I figured it out, I wasn’t triggering my next action with the javascript plugin as explained here Toolbox Plugin - Save Value of JavascriptToBubble to DB
hey jeff,
I just read your messages. Glad you got it sorted out.
1 Like
Do you know what needs to change in order to do the exact same thing but with a time instead of text?
Here’s the HTML I’m using but bubble doesnt have a value type “time” just date/time. Which didnt work.
Time Selector
/* Set the font color and position of the label element */
label {
color: white;
display: block;
margin-bottom: 8px;
text-align: center;
}
/* Set the font size and width of the time picker input element */
#start-time-picker, #end-time-picker {
font-size: 24px;
width: 200px;
display: block;
margin: 0 auto;
background-color: #222222;
color: white;
border: 2px solid #222222;
border-radius: 8px;
}
/* Set the container element to center its contents */
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: black;
}
</style>
Select a start time:
Select an end time:
<script>
// Get a reference to the start time picker input element
const startTimePicker = document.getElementById("start-time-picker");
// Set the default start time value to the current time
const now = new Date();
const hours = now.getHours().toString().padStart(2, "0");
const minutes = now.getMinutes().toString().padStart(2, "0");
startTimePicker.value = `${hours}:${minutes}`;
// Get a reference to the end time picker input element
const endTimePicker = document.getElementById("end-time-picker");
// Set the default end time value to the current time plus 1 hour
now.setHours(now.getHours() + 1);
const endHours = now.getHours().toString().padStart(2, "0");
const endMinutes = now.getMinutes().toString().padStart(2, "0");
endTimePicker.value = `${endHours}:${endMinutes}`;
// Set up an event listener on the start time picker input element
startTimePicker.addEventListener("change", function() {
// Get the value of the start time picker
const startTime = this.value;
// Set the value of the input element in Bubble to the start time
Bubble_fn_setElementValue("start-time-input", startTime);
});
</script>
When we say “time without date” or “date without time”, we’re not talking about two different types of data but rather about the 2 main parts of a reference point in time. As your script shows it, in JS there’s no new Time() class. The Date() constructor could effectively have been named DateTime() since you get time from it.
Looking at your script, I notice that you call the J2B (Javascript to Bubble) with an upper case B. I suppose you get an error in the console for that. Also, I always assumed that J2Bs supported only one argument and you have two. Perhaps I’m wrong, but I believe that the startTime value will just be ignored.
In Bubble, I don’t know if the Date/Time type is literally an instance of the javascript Date class or if it has it’s own way of managing such value. If it’s the same it means that a J2B with data type set to Date/Time could handle such statement: bubble_fn_setElementValue(new Date()).
That would be the most straightforward and performant way to do it I believe.
If it does not work, you could set the J2B to type text and pass in the value like: bubble_fn_setElementValue("start-time-input:23:59"). Then in Bubble, split the value using the colon as the separator. You’d get a list of text with the 3 value as items. Using conditions you could then set a Bubble Date/Time value for the proper element.
1 Like
I got it using your second recommendation. Saving the value as text, split it and converted it to a number. Thanks for you help!
I’m also trying to use JS to retrieve an audio files duration and cover image using from the url. I created a copy and left the link in case your able to a look and see what I’m doing wrong. It’s the only visible group and the workflows associated are blue.
