Skip to main content
Answered

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

  • 30 January 2023
  • 5 replies
  • 769 views


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!

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. 

 

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.

We’d love to see it, if you don’t mind sharing it here, @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'

 

Thanks, @jeremielp . That is definitely one fancy workaround. Thank you so much for sharing! 😀

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs