How can I get the value of a text element?

Hi!

I want to extract the value of a text element so that I can use it in a workflow to set the state of another element. I know you can use Inputs in place of text elements and get access to their contents. But the problem here is that I need to set the content of the text element using JavaScript, and I cannot see how you could set the content of an Input with JavaScript.

Program flow looks like:

  • Run some js in an HTML box with script tags.

  • That js sets the content of Textbox A (with element ID “textboxA” with something like:
    document.getElementById(“textboxA”).innerHTML = window.accountId;

  • Next, want to extract and use the value of window.accountId that has been injected into TextBox A in a workflow step (as a parameter accessing an API, for example)

Just cannot figure out how to get at that text that has been placed inside TextBox A. I have tried Toolbox, but have not been successful. May be I am not adept enough at using it!

Thanks for any help in this. Any technique that gets me what’s inside Textbox A for use in further workflow steps would very welcome.

Can you set a text based state on page using JavaScript?

Hey @ron2

I found this video helpful when setting up toolbox, and perhaps I have a solution for you below:

Here’s my setup:

  1. Create your HTML element (not sure what your functions are).
    – My script just creates a var x with a string of “test test test”
    – Put your variable into a function that can be pulled out later with the JavascripttoBubble element, in my case I called this bubble_fn_function (this will make more sense later).


  1. Add a JavascripttoBubble element to the page from the Toolbox elements.
    – Set up a function name that matches whatever was in your HTML script, in my example: function.
    – Check publish value. (otherwise I don’t think you will see it as an element with a value in Bubble).

Toolbox always has “bubble_fn_” before the name of the function and pulls out the first parameter AFAIK.


  1. Set up your text box or input (I added both on the page) = JavascripttoBubble A’s value.


  1. Set up a workflow to populate your state. In my case I just made a button that updates the state.


Result

(The state is empty before pressing the button)


Hope this helps and that I understood your requirements right,

Adam

2 Likes

Adam, thank you for this detailed answer!

I wasn’t quite able to make do what I need to do, though. No doubt due to my insufficent explanation. The textbox and input in this example are both populated by the js in the HTML, surfaced in bubble by the JavascriptToBubble plugin.

The problem is getting at the contents of a texbox or when it has been populated in some other way. For example, if I were to create a bubble text elementand put the words “Here is the text.” inside of it, how can I get at that string, using JS to bubble, for example.

If the result published by the JS to Bubble plugin is used to populate the text or input elements, then we could simply use the JS to Bubble published value in the workflow, without reference to the text or input elements.

So perhaps I have been too convoluted in my description. More simply stated: how do I get the text in a textbox available for use in a workflow? Hope that makes sense.

Will keep hacking it, see if there’s a way to leverage the great example code you provided.

Thank you!

Ron

This topic was automatically closed after 70 days. New replies are no longer allowed.