How to pass value with javascript in hidden field

I need to populate a hidden field in a form that is on a landing page. The form and landing page were created in HubSpot. The hidden field will receive dynamically generated text values that should be saved in a field on the contact, and after submitting the form, this same text should be displayed to the user. I implemented the code below in the page’s footer, but it only works when the field is not hidden. Can anyone support me with a solution?

<script>
window.addEventListener('message', event => {
 if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
 var fm = document.getElementsByName("protocolo_grco");
 	fm.value ="0001";
 console.log (fm.value);
 } 
});

window.addEventListener('message', event => {
 if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {

 	var fm = document.getElementsByName("protocolo_grco");
 	fm.value ="0001";
 	elemento = document.getElementById("output");
 elemento.innerHTML = fm.value;
 }

});
</script>

Hi PedroCampolina,

Try this:

<script>
window.addEventListener('message', event => {
 if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
 var fm = document.getElementsByName("protocolo_grco")[0];
 fm.value = "0001";
 console.log(fm.value);
 } 
});

window.addEventListener('message', event => {
 if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
 var fm = document.getElementsByName("protocolo_grco")[0];
 fm.value = "0001";
 var elemento = document.getElementById("output");
 elemento.innerHTML = fm.value;
 }
});
</script>