Javascript help - Is this possible?

[Taylor_McCarty]

So is this possible and how difficult would it be for a javascript dev to write the code?

So there is some history and back and forth that lead to the predicament I am now in and needing some help with a solution. We are using calendly to allow our existing leads to schedule appointments. However we are being tasked with using it for lead gen as well. So initially we were researching using calendly to create the lead in SFDC. However I didn't want to do this since it could result in duplicates. Additionally we need to cookie the records and capture some additional information that using a native calendly form won't allow. So my thought and possible solution is to first promote a marketo LP/form, and then upon form submission direct to the calendly appointment stuff. However after picking a date/time and what not the calendly page still asks for user info. I know I can prefill that using javascript variables or URL parameters. However I am not sure how to capture the info from the initial Marketo form submission to pass them along to the calendly to prefill. 

So again is that possible to upon Marketo form submission, pass their info along either in javascript or URL variables so that the calendly can pre-fill?? If this was already somehow answered in another post, I apologize, I hadn't find anything yet. 

[Taylor_McCarty]

I did find this after posting and doing another search - https://nation.marketo.com/t5/Product-Discussions/Add-Variables-from-Form-as-Parameters-for-Thank-Yo...

So this might work? Thoughts? Is it better to pass values through the URL or as javascript variables?

[Sanford_Whitem2]

[replaced]

[SanfordWhiteman · Accepted solution]

To be clear, there isn't really any such thing as a "JavaScript variable" passed from page to page.

Cookies can be shared between pages if they share a common parent domain. Technically the document object is a global variable and document.cookie is a property of that global, but we don't usually think of it that way.

Likewise, sessionStorage and localStorage are technically global variables shared by pages on the same origin, but you wouldn't typically think of the individual props as being JS variables — or at least that isn't the clearest way to put it!

In any case, if you're trying to pass the variables from Page A on example.com to Page B on calendly.com, you couldn't use either  of the above. The fields must be passed in the URL.

And yes, the code in that other thread is designed to do just that.

[Taylor_McCarty]

I am running into two issues that my limited java knowledge is failing me. First, I tried to update the code to parse out first name and last name as separate parameters, but it didn't seem to work. The email parameter worked just fine, except it stored the value with the @ symbol as the html code (%40). Any help on what I did wrong and how to fix the @ symbol is much appreciated. Also any idea why this would be including the aliId=? I don't recall seeing that parameter on other thank you pages of ours. I saw another post that you responded to that said it was a guard against caching? 

MktoForms2.whenReady(function(form){
  form.onSuccess(function(submittedValues,serverThankYouURL){    
    var appendValues = {
        first_name : submittedValues.FirstName,
      	last_name : submittedValues.LastName,
        email : submittedValues.Email
    };
     
    /* -- NO NEED TO TOUCH BELOW THIS LINE -- */
    
    var thankYouLoc = document.createElement("a");

    thankYouLoc.href = serverThankYouURL;
    thankYouLoc.search += Object.keys(appendValues).reduce(function(acc,key){
        acc += "&" + encodeURIComponent(key) + "=" + encodeURIComponent(appendValues[key]);
        return acc;
      }, "");

    document.location = thankYouLoc;
    return false;
  });
});

[SanfordWhiteman]

---

I am running into two issues that my limited java knowledge is failing me.

---

JavaScript though. 😉

(Two very different languages!)

---

First, I tried to update the code to parse out first name and last name as separate parameters,

In what way did it not work? If FirstName and LastName are on the form, then you did it correctly. Also, what's your URL?

---

The email parameter worked just fine, except it stored the value with the @ symbol as the html code (%40).

---

URL parameters need to be URL-encoded as a rule. So it's not a mistake: the receiving page must know how to URL-decode the query string or it isn't written to spec. 

---

Also any idea why this would be including the aliId=? I

---

B/c the aliId is part of the default Thank You URL, and the new params are added to the existing URL.

[Taylor_McCarty]

Yes, sorry I always shorten JavaScript to Java, bad habit. The code seemed to work now regarding the first name and last name. I think it was either a caching issue or IDK. But it works now. Just need to solve for the URL encoding thing. I found this script? But I am not sure how to change the var uri = to be the URL of the page the script is embedded. 

Also is that aliId something that is actually captured and stored by Marketo or anything? Or is it simply to prevent caching like you said in another post?

<script>
function myFunction() {
  var uri = "https://w3schools.com/my test.asp?name=ståle&car=saab";
  var uri_enc = encodeURIComponent(uri);
  var uri_dec = decodeURIComponent(uri_enc);
  var res = "Encoded URI: " + uri_enc + "<br>" + "Decoded URI: " + uri_dec;
  document.getElementById("demo").innerHTML = res;
}
</script>

[SanfordWhiteman]

---

But I am not sure how to change the var uri = to be the URL of the page the script is embedded. 

---

You have to parse the URI into its constituent parts. I recommend URI.js for this, which will also do the URI-decoding part automatically.

---

Also is that aliId something that is actually captured and stored by Marketo or anything? Or is it simply to prevent caching like you said in another post?

---

The aliId is Marketo's read-after-write form data cache. It doesn't have any significance on a totally non-Marketo page (with  no Marketo parts but best practice is to preserve it — since you never know when you might switch the Thank You page back.

[Taylor_McCarty]

So I need to run a script to parse out the query string? But does that change the parameters in the URL so that the form can again pick it up? Or should I be running a script that parses out the URL into the different parts and creating javascript variables and having those variables be used to populate the form? Sorry I am trying to understand this from what I can read and learn through google searches and videos.

[Taylor_McCarty]

@SanfordWhiteman I was able to get everything to work, thanks for your help! I did want to ask because its being asked of me, but can you give more info on what this chunk of code is doing? I understand what the encode stuff is doing, but I am not sure what the serverthankyouurl or the thankyouloc.

var thankYouLoc = document.createElement("a");

    thankYouLoc.href = serverThankYouURL;
    thankYouLoc.search += Object.keys(appendValues).reduce(function(acc,key){
        acc += "&" + encodeURIComponent(key) + "=" + encodeURIComponent(appendValues[key]);
        return acc;
      }, "");

    document.location = thankYouLoc;
    return false;

Again thank you for all the help. I have been learning alot about javascript and your info and posts have been amazing!