SOLVED

Re: [Coding Question] How to submit form multiple times, then reload the page at end

Go to solution
TyrellC
Level 2

[Coding Question] How to submit form multiple times, then reload the page at end

Hey all, I'm hoping I can get some input/suggestions on some functionality I'm developing. I have an array of emails collected on a page via a custom input and I am submitting them individually on a hidden Marketo form. It's simply a hidden form with an email field, nothing fancy. Each email is to be submitted on the form individually. Ideally, I would like the page to reload after the last email has been successfully sent through the form, as reloading the page resets the custom input collecting the emails and ensures all variables are cleared for the next batch. 

 

To give a bit of context:

Array of collected emails:

 

const selected_emails = ['email01@example.com', 'email02@example.com', 'email03@example.com']; 

 

Submitting each email through the form and keeping count:

 

const mkto_form_ = form.getFormElem()[0];
let count = 0;
selected_emails.forEach(email => {                    
    form.onSuccess();
    mkto_form_.reset();
    form.vals({'Email': email});
    form.submit();
    count += 1;
})

 

Checking if count is equal to the email array length, then reloading the page, otherwise preventing reload:

 

form.onSuccess(function () {
  if(count == selected_emails.length){                        
    location.reload();
  }
  return false;
})

 

This works fine in most cases, but testing on mobile devices, the page will reload before the last submission has successfully posted to Marketo. Meaning only 2 of the 3 emails actually get posted, in this example.

 

I could use a timeout, to allow some time for the last submission to be posted, but I know that hard coding time is not the best practise when it comes to network requests:

 

form.onSuccess(function () {
  if(count == selected_emails.length){                        
      setTimeout(function() {
          location.reload();
      }, 3000);
  }
  return false;
})

 

Is there any trick I am missing here, or is this going to be as good as it gets for this very specific functionality?

 

Thanks all! 

Tyrell Curry
Marketo Web Developer @ MERGE
1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: [Coding Question] How to submit form multiple times, then reload the page at end

Follow my Referral Form demo.

 

It shows how to do it all, and does not use any arbitrary, buggy timeouts.
https://codepen.io/figureone/pen/NWOJojo/a9b0afd9f427ece7d0c64d5e759e0d9a

View solution in original post

2 REPLIES 2
SanfordWhiteman
Level 10 - Community Moderator

Re: [Coding Question] How to submit form multiple times, then reload the page at end

Follow my Referral Form demo.

 

It shows how to do it all, and does not use any arbitrary, buggy timeouts.
https://codepen.io/figureone/pen/NWOJojo/a9b0afd9f427ece7d0c64d5e759e0d9a

TyrellC
Level 2

Re: [Coding Question] How to submit form multiple times, then reload the page at end

Thanks @SanfordWhiteman, I'll look into your solution.

Tyrell Curry
Marketo Web Developer @ MERGE