Re: Passing value to empty form isn't working.

Ankit_Patel1 · ‎06-18-2019

Passing value to empty form (form submission in the background) isn't working. Any help with the code?

(https://developers.marketo.com/blog/make-a-marketo-form-submission-in-the-background/)

{
var myForm = MktoForms2.allForms()[0];

myForm.addHiddenFields({

"Email": $("#mwf3723fced2f65").val() ,
"FirstName": $("#mwfca1d8fb14840").val(),
"LastName": $("#mwf2e0f8bf4c5a5").val(),

});
mktoForm.submit();
e.preventDefault();

});

</script>

Thanks.

SanfordWhiteman · ‎06-18-2019

Please highlight your code using the Advanced Editor's syntax highlighter so it's readable.

And provide as much detail as possible, not just "not working" but a description of your errors/logs and a link to your page.

Jay_Jiang · ‎06-18-2019

If you're using the code exactly as is, the code is submitting the Marketo form as soon as it's loaded and ready, and most likely when your 'pretty' form is still empty

You want to wrap the Marketo form submission in a click or submit event that triggers the form submission

e.g.

MktoForms2.loadForm("https://app-lon08.marketo.com", "162-XXX-XXX", 10XX); 
MktoForms2.whenReady(function(mktoForm) {
  var myForm = MktoForms2.allForms()[0];
  $('#prettyForm').submit(function(e){
    myForm.addHiddenFields({
      "Email": $("#mwf3723fced2f65").val() ,
      "FirstName": $("#mwfca1d8fb14840").val(), 
      "LastName": $("#mwf2e0f8bf4c5a5").val()
    });
    mktoForm.submit();
  });
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

be mindful if your pretty form is also actually submitting, because it may navigate away from the page before the marketo submission is successful

SanfordWhiteman · ‎06-18-2019

Also, e doesn't exist in any of the scopes shown, so e.preventDefault() will throw a fatal error.

(And the original code must still be highlighted, it's not realistically readable for this kind of thing.)

Ankit_Patel1 · ‎07-23-2019

Hi @Jay and @Sanford,

Thank you for helping out, but I am still facing the issue. I am trying to get the form values from the external CMS, but values I am getting are empty. I have used a custom form to try this out and it's working with custom form but not with the one built on other CMS systems. Here is the code. Kindly help me out. Thanks in advance.

    <!-- Munchkin -->
<!DOCTYPE html>
<script type="text/javascript">
(function() {
  var didInit = false;
  function initMunchkin() {
    if(didInit === false) {
      didInit = true;
      Munchkin.init('162-IOC-823', {"wsInfo":"j0hRcdjOKwEI"});
    }
  }
  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.async = true;
  s.src = '//munchkin.marketo.net/munchkin.js';
  s.onreadystatechange = function() {
    if (this.readyState == 'complete' || this.readyState == 'loaded') {
      initMunchkin();
    }
  };
  s.onload = initMunchkin;
  document.getElementsByTagName('head')[0].appendChild(s);
})();
</script>


<script src="//app-lon08.marketo.com/js/forms2/js/forms2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<form id="mktoForm_1029"></form>

<script>

 MktoForms2.loadForm("https://app-lon08.marketo.com", "162-IOC-823", 1029); 
 MktoForms2.whenReady(function(mktoForm) {

  $('#commandDEmarketo_test').submit(function(e){  

      var myForm = MktoForms2.allForms()[0];
     
      myForm.addHiddenFields({
     
        "FirstName":$('#mwf23e481e7bdc0').val(), 
        "LastName": $('#mwf08d9bc1fbf81').val() 

        });

      
      return false;
      myForm.submit();   
      e.preventDefault();

  });
});

</script>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

SanfordWhiteman · ‎07-23-2019

Your code still doesn't make sense. Code after return false; is never executed, and your order-of-operations is wrong, since the custom form is going to be ready before the Marketo form.

Plus, you definitely shouldn't use generic variable names like myForm -- you explicitly have 2 different forms here, making it ambiguous!

And jQuery isn't necessary, it just adds overhead.

If you have a custom HTML form like this:

<form id="commandDEmarketo_test">
  <input type="text" name="First_Name" id="mwf23e481e7bdc0" value="Sanford">
  <input type="text" name="Last_Name" id="mwf08d9bc1fbf81" value="Whiteman">
  <input type="submit" name="Default_Submit" value="Submit">
</form>‍‍‍‍‍

Then this JS will relay the form submission to a hidden Marketo form:

MktoForms2.loadForm("https://app-lon08.marketo.com", "162-IOC-823", 1029);
var customForm = document.querySelector("#commandDEmarketo_test"),
    customFormButton = customForm.querySelector("input[type='submit']");
  
customForm.addEventListener("submit",function(customFormSubmitEvent){  
  customFormSubmitEvent.preventDefault();    
  customFormButton.disabled = true;
  
  MktoForms2.whenReady(function(mktoForm) {     
    mktoForm.addHiddenFields({     
      "FirstName": customForm.querySelector("#mwf23e481e7bdc0").value, 
      "LastName": customForm.querySelector("#mwf08d9bc1fbf81").value 
    });
     
    mktoForm.submit();   
  });
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Note I also disable the visible Submit button: you don't want that to be clicked twice while the Marketo form is in motion.