Programmatically entered form block field data is lost when submitting my form.

I have created a form block on my page. In addition to the form block, on my page I have put an additional code-block containing html elements (input, select, etc) outside the form. When the contents of these html elements changes their values are programmatically put into associated text boxes within the form block. I am using javascript to do this. The form block is connected to third party app "Zapier". When I hit the submit button zapier receives the form data and sends it to third party app "Airtables", which then sends out two emails. (For completeness, on the same page I have also embedded a form from third party app "Cloudtables" into a second code block which is hidden and not being acted upon at the moment). I have had good success in the zapier/airtables integrations and have been able to generate the desired the emails when hitting the form submit button -- until now. Recently I have found it necessary to listen for load-completion events, before running my javascript function which initializes the code-block and form block only when the page is fully loaded. The code below shows how I have coded this page-loading and initialization into squarespace code injection. The form didplay seems to programmatically load fine when I refresh the page, or switch tabs or regain focus. However just recently, when I have been using the page, after programmatically loading the form, if I place the cursor in a field on the form, and then hit a key, all the other text boxes on the form have their contents set to data which had been previously manually typed in on the screen. Elements outside the form are not affected. When I edit elements not on the form things behave as normal. Also, if the form is completely filled out programmatically and I hit the submit button, all the text boxes on the whole form reverts to the last data which was manually typed in since the last submit button push, and that is what is submitted. If I look at the html contents of the page, programmatic changes to form block field values do not show up like manually typed in values do. It seems as if the programmatically entered data is just not "committing" to the form block like the manually typed in data is doing -- the programmatic changes show up only on the screen. Basically I need to figure out how to get the programmatically entered data to commit to the form block prior to manually editing or submitting the form.

function my_function() {

  // code which initializes the page including the code block fields and the form block fields

}

// code which runs the above code whenever the page needs re-initialized

    if(window.attachEvent) {
      window.attachEvent('onload', my_function);
    } else {
      if(window.onload) {
        var curronload = window.onload;
        var newonload = function(evt) {
            curronload(evt);
            my_function(evt);
        };
        window.onload = newonload;
      } else {
        window.onload = my_function;
      }
    }    
    document.addEventListener("load",my_function);
    document.addEventListener('focus', my_function);                            
    document.addEventListener("visibilitychange", () => {
      if (document.visibilityState === "visible") {
        my_function();
      };
    });

Note, the page where this is happening is https://philipmarksart.com/contact

Please see the following.

The rest of the thread is worth a read as well.

In addition SS is currently loading form block forms twice. I think this is a temporary situation as SS transitions from the old form block to the new. First the old form loads and then the new. To catch the new you need to use MutationObserver.

Let us know how it goes.