Get a value from an input in HTML element

[manuel.basto]

Alright, so I’m trying build a color picker system to save a color in data base, but without use any plugins except tool box for javascript. I thought about using the HTML element to create the color picker element.

And with javascript to bubble element i set the id and other things.

Then in the workflow where i send the data, i run a javascript code to get the value from the color picker. And after that i send the value with the other data.

It’s my first time using toolbox and i followed a solution for a similar problem but with another type of input. So i guess im missing something.
: P

[Zeroic]

This workflow is fine! Except - the order of the workflows might be different from the order Bubble executes it in - workflows in Bubble do not execute sequentially.

What you can do here is that to keep step 1 in your workflow (Run Javascript) and shift the remaining action to a different workflow event. This event is the When Javascript to Bubble element is triggered. You can enable this by checking the Trigger event in your Javascript to Bubble element (whenever a value is published to it, an event will be triggered)

Let me know if this helps

[manuel.basto]

IT WORKS!
Thank you, i got the value on my database now.

[manuel.basto]

Just another question, I need 3 of these inputs to get 3 diferent colors. So do you recomend use 3 HTML elements each with one input or the 3 inputs in the same HTML element? And how i can get the values of each input? because the workflow is triggered when “guardar” button is pressed

[Zeroic]

You can use 3 input elements within the same HTML element. And instead of publishing just one value in your Toolbox plugin, you can publish 2 - the ID of the colour picker and its value so that you know which input’s value has changed without having to add multiple elements in your editor.

[manuel.basto]

Sorry, maybe its too simple, but i think i didnt understand
This is what i was trying to do. First i put the 3 inputs in my HTML element

And i set the id of each input with a Javascript to bubble element for any input:

And in the workflow i did this. I add 3 “Run javascript” action to get each value of the 3 inputs. The script in the other two are the same, just changing de suffix and id for “cardPicker” or “fontPicker” respectively.

.

Then, when the script is executed just trigger a workflow to save the value in data base. Also, the workflow for the other 2 scripts is similar, changing the field and value.

I tought it will work like running the scripts and workflows 1 by 1 sequentially. But just work the first run javascript action, i can change the order, but always work only the first one.

Thank you, for all your help btw.

[Zeroic]

This setup works as well. I was referring to using just one JS2Bubble element btw and returning multiple outputs

You can check the multiple outputs return in their documentation - Javascript to Bubble - Toolbox docs