multiple JavaScript embedded forms on a page

[Anonymous]

We have a need to have multiple pages on a single webpage. They way the page works is there an initial form that needs to be filled out to access "gated" content, upon submit it would hide/reveal certain content. we would like to add a second form the user could follow up with if they have further questions. My snag is when I enter the JavaScript to the page both forms submit to the last script to load on the page. Any idea how I can get multiple forms to submit to the desired URLs?

Here is how I am loading the forms:

<script type="text/javascript">
MktoForms2.loadForm("//app-***.marketo.com", "***-***-***", 1354, function (form) {
MktoForms2.$("#formPlaceholder_1354").append(form.getFormElem());
// Set values for the hidden fields
form.vals({"productLine":"<%# Eval("ProductLine") %>","application":"<%# Eval("Application") %>","industryType":"<%# Eval("Industry") %>"});
});
//go to URL on submit
MktoForms2.whenReady(function(form){
    //Add an onSuccess handler
    form.onSuccess(function(values, followUpUrl){
      //Take the lead to a different page on successful submit, ignoring the form's configured followUpUrl.
      location.href = "/treating/thank-you.aspx";
      //return false to prevent the submission handler continuing with its own processing
      return false;
    });
  });
  </script>

Thanks!

[Mark_Price]

Hi Kristopher,

A little hard to troubleshoot without seeing a page, but in looking at the embed, the issue might be with using 'whenReady'.  That will run for multiple Marketo forms after they have loaded and 'are ready'.     If you want to target a specific form, run your code within the loadForm function: 

quick example:

MktoForms2.loadForm("//app-**.marketo.com", "***-***-***", 1354, function(form) {
 //Add an onSuccess handler
  form.onSuccess(function(values, followUpUrl){
   //run code here example - hiding form after submit
   form.getFormElem().hide();
   //return false to prevent the submission handler from taking the lead to the follow up url.
   return false;
 });
});

Others might have some more suggestions, but I would start with that. 

Hope it helps!

[SanfordWhiteman]

You can (and should, for portability to Marketo LPs) use whenReady(), but you can check the form ID -- form.getId() -- to switch actions based on which form is firing its readiness at the time.

MktoForms2.whenReady(function(form){
  var formId = form.getId();
  if (formId == 1354) {
    // 1354 is ready
  } else if (formId == 1999) {
    // 1999 is ready
  } 
  // ... etc...
});

[SanfordWhiteman]

For hidden fields, use form.addHiddenFields(), not setValues().  The former will ensure that fields are either set or added and set. The latter will fail if fields don't exist.

[Anonymous]

here is an example of the page:

Best Practices for Printing with UV/LED Curable Inks on Film & Label Stock - Enercon Industries

upon submission the form redirects to the same URL with parameters at the end that hide/reveal certain content.

Best Practices for Printing with UV/LED Curable Inks on Film & Label Stock - Enercon Industries

The request I received was to add a form under the materials in the sidebar. Both forms are on the same page, one is just hidden upon initial load.

[Mark_Price]

Hi Kristopher,

There are a few ways to do what you like.   Here's a simple addition to the loadForm example that will unhide an element by id.  Alternatively, you could try targeting by class if needed.

MktoForms2.loadForm("//app-**.marketo.com", "***-***-***", 1354, function(form) {  
 //Add an onSuccess handler  
  form.onSuccess(function(values, followUpUrl){  
   //run code here example - hiding form after submit  
   form.getFormElem().hide();
   //unhide 2nd form 
    document.getElementById('idHere').style.display = 'block';
   //return false to prevent the submission handler from taking the lead to the follow up url.  
   return false;  
 });  
});  

hope it helps!

[Anonymous]

Is there a way to target the formID to set location.href = "/treating/thank-you.aspx";  ?

I am not having luck with the solution above, it hides the form but it is still grabbing the last URL to load and the first form doesn't route properly.
<div id="formPlaceholder_1354>"></div>

[SanfordWhiteman]

Sure, see my example above. Note you need to grab the

  formid = form.getId()

in the whenReady and then reference it in the onSuccess (so it will be present in the closure of onSuccess).