Re-submit a form on button click with cookied user

[Anonymous]

Hello,

I am currently integrating Marketo forms to a website. After filling out the form the user is presented with a download button.

The setup:

JS embeds with custom HTML with a "download" button.

User fills out the form and is presented with the download button.

On button click user should receive the asset.

Assets are hosted on the website, not with Marketo.

When the user clicks the button the form should submit again in the background and the user receives the asset.

Background:

After submitting we are using an additional cookie to perform a lot of frontend swaps and changes

Once the user fills the form one time they have access to all assets, by clicking the download button on another page it should re-submit the form with the users information, tracking them from page to page (download to download) through form submissions.

The issue I am having is re-submitting the form with the user after the initial form fill.

The user goes to a new page, they are cookied by Marketo so the form shows the custom HTML download button. When clicking the download button I would like to do a form submission with the cookied users data.

Html:

MktoForms2.loadForm("//app-----.marketo.com", "910-ISZ----", ----, function(form){
     var thankYouWindow;
     var check = Cookies.get("myCookie");
     var notYou = jQuery('#mktoNotYou');
     var btn = document.getElementById("mktoButton");
     notYou.click(function(){
          Cookies.remove("myCookie");
     });
     if(check === 'unlocked'){
          btn.onclick = function() {
               thankYouWindow = window.open('');
               var download = jQuery('.locked').data('download');
               thankYouWindow.document.location = download;
              // I had hoped
             //  MktoForms2.whenReady(function (form) {
            //        form.submit();
           //    });
          // would work, but doesn't seem to. Even though Marketo has the user cookied in order to show them this button, 
         // I don't think it is pre-filling the form with the users data for re-submission.
          }
     } else {
     form.onSuccess(function(values, followUpUrl) {
          jQuery('.marketo').hide();
          jQuery('.locked').text('Download');
          var all = jQuery('.alllock');
          if (all) {
               jQuery.each(all, function() {
               jQuery(this).parent().prepend('');
               this.remove();
          });    
          jQuery(window).scrollTop(0);
          location.reload();
     }
     Cookies.set('myCookie', 'unlocked');
     return false;
     });
     }
});

Is there a way to re-submit a form outside perhaps saving all the data to a variable and re-populating the form manually and then submitting?

[SanfordWhiteman]

Please edit the post and use the Advanced Editor's syntax highlighter to make the code readable:

It also sounds like you need to read these blog posts:

Auto-submitting a form for Known Visitors

Marketo Forms Patterns: The “Not You?” session regen link

[Anonymous]

I can't seem to find any documentation on that particular known visitor editor

Is there a way to add an ID to {{form.Button:default=Auto-submit}}?

[SanfordWhiteman]

Doesn't look like you've read my response yet, so post back when you have, thanks.

[Anonymous]

Sorry,

I read both posts and am 99% on the way there, and I added syntax highlighting to the post as you requested..

I am just wondering if there is a way to add an ID to the button short code in the KV editor

[SanfordWhiteman]

Why do you want an ID? You already know the CSS selector that correctly finds that element (and only that element).

[Anonymous]

ID's are also CSS selectors, is it not possible?

[SanfordWhiteman]

IDs are supposed to be opaque strings.

You already know how to select the button flawlessly, and with no need to remember to make edits in Form Editor and keep IDs unique across forms on the same page.

Again, why do you need an ID on it?  What could that give you when you can already get a handle to the element and do whatever you want to/with it?

[SanfordWhiteman]

Also, bear in mind that every part of your code that doesn't constrain a selector to the current form element (form.getFormElem()[0]) will break with multiple forms on the page. A call to document.getElementById, for example, will return the first element in the DOM with a given ID, and Marketo forms don't obey ID uniqueness.  element.querySelector("#id") constrains the search to the parent form only.

[Anonymous]

Correct,

But in my use-case there is only one form per page and the code is executed outside of the Marketo backend on page in the JS embed.

I simply wrapped the button in a span and assigned it an ID so everything is working now.

Thanks