Jump to content

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

Go to solution Solved by pjmsr,

Recommended Posts

Posted

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();
      };
    });

  • Replies 3
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

  • 1 month later...
  • Solution
Posted

I was using the form on my contact/purchase page for three reasons. First, in conjunction with the third-party products "airtable" and "zapier" I had found out how to send multiple emails containing form data when I hit the submit button. Second, it was useful to be able to use the screen-formatting of fields such as name and address which react nicely when I resize my window on the desktop or when I open the page on my iphone. Third, it was useful to use the validation functionality of the form for fields such as email. I am now abandoning the use of a form for all these things, and am taking alternate approaches. I have determined how to send emails when I hit any button (more on this in a later post) and am currently evaluating how to incorporate data from other basic fields on the page, some of which need to be filled in programmatically. I will have to handle screen formatting without the form, perhaps by using basic non-form fields. I have determined that it is not too hard to validate things like the contents of text boxes as they are being edited and/or upon hitting a button. Worst case I can use html to do all these things. So it will be some more work but I know how to implement all the pieces and just need to put them all together. Thanks everyone who have posted comments above. If anyone still wants to use a form to do these things, the above posts may provide some answers. Good luck. I am now marking this topic answered.

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.