SOLVED

Re: Multiple versions of one form Id not submitting after 1st time

Go to solution
Jeffery_Werner_
Level 2

Multiple versions of one form Id not submitting after 1st time

Hello all,

I  am making a reusable component for my cms that will allow content authors the ability to add a link to a page that will spawn a modal that contains a marketo form. I have added code to inject the form on clicking of the link and once the form is submitted or cancelled we  remove the form tag, the div( mktoStyleLoaded )  and the iframe (iframe#MktoForms2XDIframe).

The first time we submit any form on the page it goes through and we get a success response. Now when you click a second link (can be the same modal or a different) the data is collected in the form2 code it look likes we even get to doAjaxSubmit(); but we never hear back.

Here is a modal html

<div class="modal-form">

  <a type="button"

  class="cta-button primary-button" id="123" data-form-id="1619" data-toggle="modal" data-target="#mktoForm_123-modal">

  Form with msg

  </a>

  <div class="modal fade modal-form" id="mktoForm_123-modal" tabindex="-1" role="dialog">

  <div class="modal-dialog">

  <div class="modal-content">

  <div class="modal-header">

  <div class="logo"></div>

  <h4>Test Form Title</h4>

  <button type="button" class="close x-button" data-dismiss="modal" aria-label="Close">

  <span aria-hidden="true"> </span>

  </button>

  </div>

  <div class="modal-body">

  <div class="modal-form-content" id="modal-mktoForm_123-intro">

  <h2>Test Form Title</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut lectus feugiat, ullamcorper libero ut, dignissim quam. In hac habitasse platea dictumst. In ac rhoncus enim, vehicula gravida odio. Pellentesque diam justo, fermentum sed massa vitae, volutpat vulputate felis. Nulla volutpat, lectus et sollicitudin vulputate, tortor justo bibendum ante, sit amet volutpat purus neque quis eros. Pellentesque enim elit, tempus id ipsum nec, rutrum ullamcorper diam. Morbi a eros venenatis, molestie dolor sodales, tempus risus. Mauris volutpat urna ac neque pharetra, eget feugiat lectus lobortis. Vivamus eu sem eu purus imperdiet feugiat vitae eu nibh.</p>

  </div>

  <div class="modal-form-holder"></div>

  <div class="modal-form-content" id="modal-mktoForm_123-chaser">

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut lectus feugiat, ullamcorper libero ut, dignissim quam. In hac habitasse platea dictumst. In ac rhoncus enim, vehicula gravida odio. Pellentesque diam justo, fermentum sed massa vitae, volutpat vulputate felis. Nulla volutpat, lectus et sollicitudin vulputate, tortor justo bibendum ante, sit amet volutpat purus neque quis eros. Pellentesque enim elit, tempus id ipsum nec, rutrum ullamcorper diam. Morbi a eros venenatis, molestie dolor sodales, tempus risus. Mauris volutpat urna ac neque pharetra, eget feugiat lectus lobortis. Vivamus eu sem eu purus imperdiet feugiat vitae eu nibh.</p>

  </div>

  </div>

  </div><!-- /.modal-content -->

  <div class="modal-sucess-msg">Thank you you have completed the form and we will get back to you.</div>

  </div><!-- /.modal-dialog -->

  </div><!-- /.modal -->

  </div>

here is my js

window.Foo = window.Foo || {};

window.Foo.ModalForm = (function ($, window, document) {

  "use strict";

  var pluginName = "ModalForm",

  overlayOpenStatus = false;

  /*

  * Modal Form constructor

  * */

  function ModalForm(){

  this.init();

  }

  ModalForm.prototype.init = function(){

  if (typeof MktoForms2 == "undefined"){

  var head= document.getElementsByTagName('head')[0];

  var script= document.createElement('script');

  script.type= 'text/javascript';

  script.src= '//app-ab13.marketo.com/js/forms2/js/forms2.js';

  head.appendChild(script);

  var everythingLoaded = setInterval(function() {

  if (/loaded|complete/.test(document.readyState)) {

  clearInterval(everythingLoaded);

  $(".cta-button").click(function( e ){

  ModalForm.prototype.initForm($( this ));

  });

  }

  }, 10);

  }

  };

  ModalForm.prototype.initForm = function(item) {

  var formModal = $(item).parent(),

  formLink =  $(item),

  formTarget = $(formLink).attr('data-target'),

     formID = $(formLink).attr('data-form-id') || "",

     formResult = $(formLink).attr('data-form-result') || "blank",

     formSucessUrl = $(formLink).attr('data-success-url') || '',

     formCloseBtn = $(formTarget).find(".close.x-button"),

     formRedir = false,

     formHolder = $(formTarget).find('.modal-form-holder'),

  formHtml = "<form id='mktoForm_" + formID + "'></form>",

  currentModal = $(formTarget).find(".modal");

  if (formSucessUrl.length > 0){

  formRedir = true;

  }

  $(formHolder).append(formHtml);

  $(formTarget).on('hidden.bs.modal', function () {

   $(".modal-form-holder").empty();

   $('form.mktoForm').remove();

   $('#mktoStyleLoaded').remove();

   $('iframe#MktoForms2XDIframe').remove();

  })

  MktoForms2.loadForm("//app-ab13.marketo.com", "754-FXO-315", formID, function (form){

  form.onSuccess(function(values, followUpUrl){

  $(formTarget).find(".modal-content").fadeOut('fast');

  if (formRedir) {

  if (formResult == "blank") {

  window.open(formSucessUrl, '_blank');

  $(formTarget).modal('hide');

  } else {

  location.href = formSucessUrl;

  }

  } else {

  $(formTarget).find(".modal-sucess-msg").fadeIn(100).delay(5000).fadeOut('slow').delay(600, function(){

  $(formTarget).modal('hide');

  $(formTarget).on('hidden.bs.modal', function () {

  $(formTarget).find(".modal-content").show();

  $(formTarget).find(".modal-sucess-msg").hide();

  });

  });

  }

  return false;

  });

  });

  }

  ModalForm.prototype.enableListeners = function(){

  };

  $.fn[pluginName] = function () {

  return this.each(function () {

  if (!$.data(this, "plugin_" + pluginName)) {

  $.data(this, "plugin_" + pluginName,

  new ModalForm(this));

  }

  });

  };

  return ModalForm;

})( jQuery, window, document );

$(document).ready(function(){

  $(".modal-form.modal.fade").each(function () {

  var modalPrime = $(this);

  $('body').append(modalPrime);

  }),

  $('body').ModalForm();

});

Any help would be much appreciated

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Multiple versions of one form Id not submitting after 1st time

The problem is you're removing the XDFrame from the DOM.  This is supposed to be a singleton shared by all forms.  The wrapper and reference to it remains, but since it's not in the DOM it cannot be used for transport.  Since there's no reason to remove it (it's just a fancy way to break the form) just remove that line.

View solution in original post

7 REPLIES 7
SanfordWhiteman
Level 10 - Community Moderator

Re: Multiple versions of one form Id not submitting after 1st time

Please link to a live URL.  This forum doesn't run code.

Jeffery_Werner_
Level 2

Re: Multiple versions of one form Id not submitting after 1st time

Sorry the code is running on our dev site and is not accessible at this time.

SanfordWhiteman
Level 10 - Community Moderator

Re: Multiple versions of one form Id not submitting after 1st time

OK. If you put runnable, representative code in a JSFiddle or similar, I'll debug it for you and find the problem. Otherwise, you're putting the burden on us to build a testing environment, which I don't think is fair.

Jeffery_Werner_
Level 2

Re: Multiple versions of one form Id not submitting after 1st time

Sanford,

I have mocked it up on jsfiddle

marketo modal - JSFiddle

I see the same behavior here as well.

SanfordWhiteman
Level 10 - Community Moderator

Re: Multiple versions of one form Id not submitting after 1st time

Thank you for taking the time to do that. I'll look at it in about an hour when I'm back at my machine.

SanfordWhiteman
Level 10 - Community Moderator

Re: Multiple versions of one form Id not submitting after 1st time

The problem is you're removing the XDFrame from the DOM.  This is supposed to be a singleton shared by all forms.  The wrapper and reference to it remains, but since it's not in the DOM it cannot be used for transport.  Since there's no reason to remove it (it's just a fancy way to break the form) just remove that line.

View solution in original post

Jeffery_Werner_
Level 2

Re: Multiple versions of one form Id not submitting after 1st time

Sanford,

thanks that fixed it.