Script For Unchecking Dropdowns In Subscription Center | Community
Skip to main content
March 28, 2018
Question

Script For Unchecking Dropdowns In Subscription Center

  • March 28, 2018
  • 3 replies
  • 3554 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

3 replies

SanfordWhiteman
Level 10
March 28, 2018

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
Level 10
March 28, 2018
SanfordWhiteman
Level 10
March 29, 2018

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.

March 29, 2018

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