Reloading page after form pop-up is closed

[Pavel_Plachky]

I have a pop-up form on a Marketo landing page where users can register for a workshop. I have used a technique described here to show a thank you message in the pop-up after user submits a form. So far so good, thanks a lot Sanford Whiteman​

There are a few workshop options and a user may want to register for more than one. Unfortunately, the second time the form pops up, it shows the thank you message instead of the form. Therefore I would like to reload the form or entire page when the pop-up is closed, but could not find any documented way to trigger when the pop-up is closed.

Test page here: http://marketing.syneron-candela.com/Workshop-Test_Registrationv2019.html

I would appreciate any help.

Pavel

[SanfordWhiteman]

Well, first of all, the current popup behavior is broken on all versions of IE, Edge before v16, and also older pre-modern versions of Chrome and Firefox (which are still in use). Remember, you can't just test in late-model Chrome and assume something is ready to go.

The reason it doesn't work is you're calling NodeList#forEach, which is a new method only in the latest browsers. While you can polyfill that pretty easily, polyfills should only be in a globally included JS file. So instead change the current code.

(function () {
  var productListButtons = document.querySelectorAll("button.product-list__btn");
  productListButtons.forEach(function(btn){
    btn.onclick = function() {showPopUp(btn.getAttribute("default_string_1"))};
  });
})();

to use a compatible call to Array#forEach:

(function () {
  var productListButtons = document.querySelectorAll("button.product-list__btn"),
      arrayify = getSelection.call.bind([].slice);
  arrayify(productListButtons).forEach(function(btn){
    btn.onclick = function() {showPopUp(btn.getAttribute("default_string_1"))};
  });
})();

Fix that up first, then we'll continue with the re-popup/reload question.

[Pavel_Plachky]

Thank You Sanford for kindly pointing the incompatibility. It works in Internet Explorer now.

[SanfordWhiteman]

OK, now change your JS to alternate between Thank You text and the full form:

function showPopUp(defaultStr) {
  if (typeof MktoForms2 !== 'undefined') {
      MktoForms2.whenReady(function(form) {
         var formEl = form.getFormElem()[0],
             submitButton = formEl.querySelector("button.mktoButton[type='submit']"),
             thankYouContainer = formEl.querySelector('#thankYouContent') || document.createElement('DIV');
         thankYouContainer.id = "thankYouContent";
         thankYouContainer.textContent = ""; // clear TY content, if any
         submitButton.disabled = false; // ensure pointer submittability
         form.setValues({ "defaultstring1" : defaultStr }); // set runtime default
         MktoForms2.lightbox(form, {
            onSuccess: function(vals, thankYouURL) {
                    var thankYouLoc = document.createElement('A'),
                        thankYouHTML;
                    thankYouHTML = decodeURIComponent((thankYouLoc.href = thankYouURL, thankYouLoc).hash.substring(1));
                    thankYouContainer.innerHTML = thankYouHTML;
                    formEl.insertBefore(thankYouContainer,formEl.firstChild);
                    return false;
                }
            }).show();
        });
  }
}

And add this little bit o' CSS:

.mktoForm #thankYouContent:not(:empty) ~ div {
  display: none;
}

[Pavel_Plachky]

Thank You, Sanford, for your help. Unfortunately your suggestion did not work for me as it is unstable in IE. Even more importantly the button shows "Please Wait" on second form open. I went ahead with a different solution by adding this code to the onSuccess handler, which refreshes the page when the modal window is closed.

{code}

//Refresh the page when person closes the modal so they can re-submit the form

var closeNodes = document.getElementsByClassName("mktoModalClose");

var i;

for (i = 0; i < closeNodes.length; i++) {

closeNodes[i].onclick=function() {

location.reload();

}

}

{code}

Thanks again,

Pavel

[SanfordWhiteman]

I definitely would not do what you're doing here.

The button text is easy -- just change submitButton.textContent = "Submit" right after disabled = false. Sorry I left that out of the function, I was aware of the need.

What exactly do you mean by unstable in IE? There's no non-IE method here.

[Avtar_Singh1]

Hi Pavel,

You need to change popup form success submission code written in http://marketing.syneron-candela.com/rs/620-HCU-218/images/workshop-registration-popup.js. Following code is replacing forms HTML with the "Thank you message"

formEl.innerHTML = (thankYouContainer.innerHTML = thankYouHTML, thankYouContainer).outerHTML; 

Hence second-time popup appears with thank you the message which is incorrect. To fix this issue on form success event you need to hide(NOT REPLACE) form and show "Thank you message" and if the user clicks on the "I'm Registering" button on the page then hide "Thank you message" and show the form again.

Best Regards,

Avtar Singh