Page reloads in Vue 3 after form is submitted.

[Aaron_Krug]

I am trying to create a Vue 3 Component  for Marketo Form. The form is loading fine and submitting fine but for some reason the page reloads even though I am doing a `return false` in the OnSuccess method. If I change the settings in Marketo for the "Thank you page" to external url from stay on page  it will redirect to that url. It seems the "return false" is being ignored as the alert is displayed when the form is submitted. Thanks you for any help.

<template>
  <form :id="formId"></form>
</template>

<script>

export default {
  props: {
    mktoFormId: {
      type: Number,
      required: true,
    },
  },

  setup(props, { slots }) {
    const formId = "mktoForm_" + props.mktoFormId;

    if (window.MktoForms2) {
      MktoForms2.loadForm(
        "//app-ab13.marketo.com",
        "736-VEE-917",
        props.mktoFormId,
        function (mktoForm) {
          mktoForm.onSuccess(function () {
            alert("Success");
            return false;
          });
        }
      );

      MktoForms2.whenReady(function (mktoForm) {
        console.log("Load");
      });
    }

    return {
      formId,
    };
  },
};
</script>

[SanfordWhiteman]

Can you link to a page where this is rendered please? Otherwise we have to set up a Vue environment just to test.

[Aaron_Krug · Accepted solution]

Here you go.

https://www.retirepathva.com/contact/subscribe 

The code I posted above is as basic as I could get trying to figure out the problem. This page has more code and should show a success message when submitted.

[SanfordWhiteman · Accepted solution]

Because you have another onSuccess listener loading via GTM, and that one redirects.

[Aaron_Krug · Accepted solution]

Thanks the helped fix it. Adding what I changed to fix it for others.

I had the following code in a tag in Google Tag Manager. I removed the 'eventCallback'.

form.onSuccess(function handleSuccess (values, followUpUrl) {
  window.dataLayer.push({
    "event": "mkto.form.success",
    "mkto.form.id": form.getId(),
    "mkto.form.values": values,
    "mkto.form.followUpUrl": followUpUrl,
    "eventCallback": function () {
      document.location.href = followUpUrl;
    },
    "eventTimeout" : 3000
  });
  return false;
});

[SanfordWhiteman]

Except people should not just be removing that line. That’s the correct implementation if you’re logging to the GTM dataLayer and not staying on the page afterward. It’ll confuse people to say the eventCallback isn’t necessary.

It should be clear that “not redirecting“ and “deliberately redirecting“ are in conflict with each other.