SOLVED

webform Jscript - pass hidden value on 2 conditions

Go to solution

webform Jscript - pass hidden value on 2 conditions

Im stuck with a JS calling out for some help. 

 

I have an embedded marketo webform and use the following Jscript to modify some behavior on submission: 

- hide form + custom thank you message

- pass various consent values when field CandidateSOI =yes

 

What I cannot figure out is to use multiple conditions to pass hidden values. More specifically, 
I would like to pass

"Marketing_Consent_Mail__c": "Given", only when CandidateSOI=yes and an address was entered

"Marketing_Consent_Phone__c": "Given", only when CandidateSOI=yes and a phone number was added

"Marketing_Consent_SMS_Text__c": "Given", only when CandidateSOI=yes and a mobile phone was added.

 

 

MktoForms2.whenReady(function (form) {

// turn off Munchkin cookie

form.addHiddenFields({"_mkt_trk":""});
form.onSubmit( function(form){
form.vals({"_mkt_trk":""});})

// pass mkt consent values Candidates
var consentObjCan = {
                      "Marketing_Consent__c" : "Given",
"Marketing_Consent_Email__c" : "Given",
"Marketing_Consent_Survey__c": "Given",
"Marketing_Consent_Mail__c": "Given",
"Marketing_Consent_Phone__c": "Given",
"Marketing_Consent_SMS_Text__c": "Given",
                     };
    form.onSubmit(function () {
        var consent = form.vals()["candidateSOI"] === "yes" ? true : false;
            if (consent) {
                form.addHiddenFields(consentObjCan);
            }
        });

    //Add an onSuccess handler
form.onSuccess(function(values, followUpUrl) {
     var email = form.vals().Email,
       firstName = form.vals().FirstName,
	lastName = form.vals().LastName,
       html = "<div style='font-weight: bold; color: black; text-align: left;'>$firstName $lastName ($email) <br/><br/> wurde in die Datenbank eingetragen.<br/><br/>Seite neu laden mit: STRG + F5<br/><br/><br/></div>";

     html = html.replace("$firstName", firstName);
     html = html.replace("$email", email);
     html = html.replace("$lastName", lastName);

document.getElementById("hidemessage").style.visibility = "hidden";
document.getElementById("showmessage").style.visibility = "visible";

$('html, body').animate({
    scrollTop: ($('#yellowbox').offset().top)
},500);

     // Get the form's jQuery element and hide it
     form.getFormElem().hide();

     // Return false to prevent the submission handler from taking the lead to the follow up url
     form.getFormElem().after(html);
     return false;
   });
 });
// ]]></script>

 

 

 

 

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted

Re: webform Jscript - pass hidden value on 2 conditions

Quite a bit of redundancy there too.

 

Look at the code here: CodePen - nation/297488 - MktoForms2 

View solution in original post

5 REPLIES 5
Highlighted

Re: webform Jscript - pass hidden value on 2 conditions

Pls say "JS" or "JavaScript", not "JScript" - JScript is a Microsoft-only implementation of ECMAScript so confusing on its own.

 

If you want to condition hidden fields on a combo of other properties, then simply add them to a "request builder" type of object, one-by-one. (You could technically add them all at once as undefined or blank, but that's harder for a reader to follow.)

 

This is the pattern:

 

 

var currentValues = form.getValues(),
      hasPrimaryConsent = currentValues["candidateSOI"] === "yes",
      hasAddress = !!currentValues["Address"],
      hasPhone = !!currentValues["Phone"],
      hasMobilePhone = !!currentValues["MobilePhone"];

var additionalConsentObj = {};

if( hasPrimaryConsent ) {
  if (hasAddress) { additionalConsentObj["Marketing_Consent_Mail__c"] = "Given"; }
  if (hasPhone) { additionalConsentObj["Marketing_Consent_Phone__c"] = "Given"; }
  if (hasMobilePhone) { additionalConsentObj["Marketing_Consent_SMS_Text__c"] = "Given"; }
  form.addHiddenFields(additionalConsentObj);
}

 

 

Highlighted

Re: webform Jscript - pass hidden value on 2 conditions

Thanks for the quick reply Sanford.

 

I added the code as shown below, but the phone, SMS or Mail consent values are not being passed on submission.

Something still seems to be wrong.

 

Would you kindly have another look at this for me ?

 

<script src="//app-lon04.marketo.com/js/forms2/js/forms2.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script>// <![CDATA[
MktoForms2.whenReady(function (form) {

// turn off Munchkin cookie

form.addHiddenFields({"_mkt_trk":""});
form.onSubmit( function(form){
form.vals({"_mkt_trk":""});})

// pass mkt consent values Candidates
var consentObjCan = {
                      "Marketing_Consent__c" : "Given",
"Marketing_Consent_Email__c" : "Given",
"Marketing_Consent_Survey__c": "Given",
                     };
    form.onSubmit(function () {
        var consent = form.vals()["candidateSOI"] === "yes" ? true : false;
            if (consent) {
                form.addHiddenFields(consentObjCan);
            }

//additional Consent values
var currentValues = form.getValues(),
      hasPrimaryConsent = currentValues["candidateSOI"] === "yes",
      hasAddress = !!currentValues["Address"],
      hasPhone = !!currentValues["Phone"],
      hasMobilePhone = !!currentValues["MobilePhone"];

var additionalConsentObj = {};

if( hasPrimaryConsent ) {
  if (hasAddress) { additionalConsentObj["Marketing_Consent_Mail__c"] =="Given"; }
  if (hasPhone) { additionalConsentObj["Marketing_Consent_Phone__c"] =="Given"; }
  if (hasMobilePhone) { additionalConsentObj["Marketing_Consent_SMS_Text__c"] =="Given"; }
  form.addHiddenFields(additionalConsentObj);
}

});

    //Add an onSuccess handler
form.onSuccess(function(values, followUpUrl) {
     var email = form.vals().Email,
       firstName = form.vals().FirstName,
	lastName = form.vals().LastName,
       html = "<div style='font-weight: bold; color: black; text-align: left;'>$firstName $lastName ($email) <br/><br/> wurde in die Datenbank eingetragen.<br/><br/>Seite neu laden mit: STRG + F5<br/><br/><br/></div>";

     html = html.replace("$firstName", firstName);
     html = html.replace("$email", email);
     html = html.replace("$lastName", lastName);

document.getElementById("hidemessage").style.visibility = "hidden";
document.getElementById("showmessage").style.visibility = "visible";

$('html, body').animate({
    scrollTop: ($('#yellowbox').offset().top)
},500);

     // Get the form's jQuery element and hide it
     form.getFormElem().hide();

     // Return false to prevent the submission handler from taking the lead to the follow up url
     form.getFormElem().after(html);
     return false;
   });
 });
// ]]></script>

 

Highlighted

Re: webform Jscript - pass hidden value on 2 conditions

Pls provide a link to the page where this is running so I can inspect the form itself.
Highlighted

Re: webform Jscript - pass hidden value on 2 conditions

Quite a bit of redundancy there too.

 

Look at the code here: CodePen - nation/297488 - MktoForms2 

View solution in original post

Highlighted

Re: webform Jscript - pass hidden value on 2 conditions

Thank you very much for your help Sanford. 

Much appreciated. The Script works like a charm.