Toggle .js in guided landing pages?

[Anonymous]

I have a basic javascript that overrides form redirects when I want the user to stay on the page, and returns a thank-you message. What I'd like is the ability to turn that on or off in the options. I was blindly hoping something like this would work:

<meta class="mktoBoolean" id="formsendrule" mktoName="Stay or redirect form" default="false" true_value="<script>//the script here</script>" false_value=" " false_value_name="Hide" true_value_name="Show">

But all the characters in the script break the meta tag.

I saw a couple suggestions for future improvements to solve this problem, in this post:

But I'm wondering if anybody's come up with a work-around? One thought I had is maybe using the mktoBoolean to show/hide a simple class name somewhere, then adding an if statement to the .js script itself so it only fires if div X has class Y, or something.

For reference, the basic .JS is:

<script>

MktoForms2.whenReady(function (form){

  form.onSuccess(function(values, followUpUrl){

   form.getFormElem().hide();

   document.getElementById('confirmform').style.visibility = 'visible';

   return false;

});

});

</script>

[SanfordWhiteman]

No reason to have the whole script in the variable!

Use the variable as you would a JS boolean. Use values "true" and "false" in the <meta> declaration. Then

if (${myvarname}) {

...

}

[Anonymous]

I haven't had a situation quite like this, but I never like using the page guides to load in content. Here's how I would do it:

var value = ${formsendrule};

if (value == true){

  your script here

}

Let me know if this works!

[SanfordWhiteman]

That's exactly the same approach as my post. You don't need the temporary variable, though.

[Anonymous]

Ah.. even simpler. I think I might be missing something though. Doesn't seem to work yet. The default redirect is still happening. I must be missing something on this.. Here's what I have:

<meta class="mktoBoolean" id="formsendrule" mktoName="Stay or redirect form" default="false" true_value="true" false_value="false" false_value_name="Redirect" true_value_name="Stay">

Then, further down in the header tag is my script:

<script>

MktoForms2.whenReady(function (form){

  form.onSuccess(function(values, followUpUrl){

     if (${formsendrule}) {

     // Also Tried: if(${formsendrule} == true) { ... neither worked

    // and tried putting the if statement in different spots, ie wrapping the entire function in it. still didn't work

       form.getFormElem().hide();

       document.getElementById('confirmform').style.visibility = 'visible';

       return false;

     }

   });

});

</script>

which turns on : <div id="confirmform">${formmessage}</div>

[Anonymous]

You may need a preventDefault() action in there after onSuccess.

[Anonymous]

Tried that too. Still no luck. Though, I thought "return false;" handled that?

Is this something that may not be possible in Marketo, or am I likely just running into a scripting issue?

EDIT - Just tested the basic script, without the if statement. it's not working. So it may not be the if statement. Not sure why this script wouldn't be firing. It definitely works on another template I have.

[SanfordWhiteman]

FYI, preventDefault() can only be used with actual Event objects.  Marketo's event model is not passing a native Event to the listener.

Also, although preventDefault() can in theory be used with any Event, in practice it doesn't make sense on a CustomEvent because there is no default host event to prevent.  It would be just another custom signal that you could pass equally well via other means.

[Anonymous · Accepted solution]

Aha!

I was a dingbat and forgot to include the forms2.min.js script

So, to recap: in a guided landing page, if somebody wants the ability to toggle between a page that stays put and displays a message sitting in a hidden div, or redirects to another page.

I added the metatag:

<meta class="mktoBoolean" id="formsendrule" mktoName="Stay or redirect form" default="false" true_value="true" false_value="false" false_value_name="Redirect" true_value_name="Stay">

Then added a touch of .js:

<script src="//app-ab14.marketo.com/js/forms2/js/forms2.min.js"></script>

<script>

if (${formsendrule}) {

MktoForms2.whenReady(function (form){

  form.onSuccess(function(values, followUpUrl){

    form.getFormElem().hide();

    document.getElementById('confirmform').style.visibility = 'visible';

     return false;

  });

});

};

</script>