Update the value of a TypeForm Hidden Field after the form has been created. | Community
Skip to main content
Answered

Update the value of a TypeForm Hidden Field after the form has been created.

  • January 30, 2023
  • 5 replies
  • 867 views

Forum|alt.badge.img+5


Is there an option to dynamically modify a hidden field via Javascript, after the form has been loaded, and without reloading the form?

My use case:

I have a Typeform that needs to validate a field using a third-party API. The user fills the field and keep going, and a few questions later, Typeform selects the correct branch based on the result obtained by the API while the user was filling the rest of the form.


I have a TypeForm Business Plan, so using Google Tag Manager to load a small JS script, I was able to get the answer to the question, send it to the API to make the check and get the result. I was thinking to use a hidden field so that Typeform selects the correct path.

Yet, I can not update the value of a hidden field.

I have seen this page, with the section "Pass hidden field values", but it only works when creating the form
https://developer.typeform.com/embed/hidden-fields/

I have also tried the transitiveSearchParams option, to load them from the hosted page. But again, it seems it only loads them once.

I have tried to modify the window.location.hash to update the value of the hidden fields, but TypeForm does not consider the new value, so I guess the hidden parameters values shall be stored somewhere, but I have been unable to find how to update them.

Thanks!

Best answer by jeremielp

Variables are stored in:

window.rendererData.form.variables

So, using a script inserted by GTM, it is possible to use the following command to update the variables, which will be taken into consideration for any further branch logic

window.rendererData.form.variables[my_variable] = 'new value'

 

View original

5 replies

Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • 15035 replies
  • January 31, 2023

Hi @jeremielp Happy Tuesday! The options in the form need to be set before the respondent begins the form. It isnโ€™t possible to update them dynamically, and this would be the case for hidden fields, too. The respondent would need to reload the typeform to update the hidden fields. 


Forum|alt.badge.img+5
  • Author
  • Community Wizard
  • 127 replies
  • January 31, 2023

 

Liz wrote:

Hi @jeremielp Happy Tuesday! The options in the form need to be set before the respondent begins the form. It isnโ€™t possible to update them dynamically, and this would be the case for hidden fields, too. The respondent would need to reload the typeform to update the hidden fields. 

 

I finally figured out a workaround today using variables, which I can use to indicate which branch to go to, and which can be modified using Javascript. I am not publishing any code as this may not be a use case that you want to support, but let me know if you want more info.


Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • 15035 replies
  • February 1, 2023

Weโ€™d love to see it, if you donโ€™t mind sharing it here, @jeremielp !


Forum|alt.badge.img+5
  • Author
  • Community Wizard
  • 127 replies
  • Answer
  • February 1, 2023

Variables are stored in:

window.rendererData.form.variables

So, using a script inserted by GTM, it is possible to use the following command to update the variables, which will be taken into consideration for any further branch logic

window.rendererData.form.variables[my_variable] = 'new value'

 


Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • 15035 replies
  • February 2, 2023

Thanks, @jeremielp . That is definitely one fancy workaround. Thank you so much for sharing! ๐Ÿ˜€