Script For Unchecking Dropdowns In Subscription Center

[Anonymous]

I found a helpful post in the community sharing a script that automatically checks or unchecks other fields in a subscription center form based on a specific action/click. However, in my subscription center, I use a checkbox for unsubscribing from everything and dropdown fields for subscribing or unsubscribing from the specific topic.

The original script I posted in this post had poor coding in it, but Sandford Whiteman​ provided a script to solve this problem. See below ...

Message was edited by: Lisa Dahlager

[SanfordWhiteman]

The contribution is definitely appreciated, but please don't do it this way!  It encourages poor coding practices (as does the post you based it on -- you can see my code revisions there as well).

You should use the Marketo Forms 2.0 API to change form values, not generic DOM methods, which will break in all but the most generic form.  You also can't use getElementById when there are multiple forms on a page, among other cases.

Do it like this, assuming your selects use the string "no" as opt-out.

MktoForms2.whenReady(function(form) {
   var masterField = "Unsubscribed",
      dependentFields = [
         "subscribe_resources__c",
         "subscribe_blog__c",
         "subscribe_webinars__c" 
         /* add more fields as needed */
      ],
      propagateMasterCheckedState = {
         true : "no", /* value of dependents when master checked */
         false : ""   /* value of dependents when master unchecked */
      }
   /* --- no need to edit below this line --- */
   var formEl = form.getFormElem()[0],
      masterEl = formEl.querySelector("[name='" + masterField + "']");
   masterEl.addEventListener("click", function(e) {
      var fieldsObj = {};
      dependentFields.forEach(function(field) {
         fieldsObj[field] = propagateMasterCheckedState[this.checked];
      },this);
      form.setValues(fieldsObj);
   });
});

Also, option 0 in your selects won't be "NULL" ("NULL" has special meaning on forms and is not added by default) it'll be the empty string.

[SanfordWhiteman]

Running here: MktoForms2 :: Checkbox → Dependent Select​

[Jessica_Cross1]

Who's reading this in 2019??

Thanks Sanford Whiteman​

[SanfordWhiteman]

Also, to help you learn the DRY principle in programming, here's how you refactor your original code toward less repetition and more maintainability:

document.getElementById("subscribe_resources__c").selectedIndex = 0;
document.getElementById("subscribe_blog__c").selectedIndex = 0;

simplifies to

document.getElementById("subscribe_resources__c").selectedIndex =
document.getElementById("subscribe_blog__c").selectedIndex = 0;

which simplifies to

[document.getElementById("subscribe_resources__c"),document.getElementById("subscribe_blog__c")] 
  .forEach(function(element){ 
    element.selectedIndex = 0; 
  });

which simplifies to

["subscribe_resources__c","subscribe_blog__c"]
  .forEach(function(id){ 
     document.getElementById(id).selectedIndex = 0; 
  });

which simplifies to (this is specific to how ID attributes work)

["subscribe_resources__c","subscribe_blog__c"]
  .forEach(function(id){ 
    window[id].selectedIndex = 0; 
  });

You can see how with each iteration, there's less repetition, less to type/mistype.

If you're certain you're in the global scope, you can even go further to:

[subscribe_resources__c,subscribe_blog__c]
  .forEach(function(id){ 
    id.selectedIndex = 0; 
  });

But I wouldn't do that last one unless you're really sure of the overall code architecture.

[Anonymous]

Thank you very much, Sanford Whiteman​. I appreciate the help. I will edit my original post.