webform Jscript - pass hidden value on 2 conditions

[Moritz_Trollman]

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>

[SanfordWhiteman]

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);
}

[Moritz_Trollman]

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>

[SanfordWhiteman]

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

[SanfordWhiteman · Accepted solution]

Quite a bit of redundancy there too.

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

[Moritz_Trollman]

Thank you very much for your help Sanford. 

Much appreciated. The Script works like a charm.