Subscription Center - Check/Uncheck All Javascript

Anonymous
Not applicable

Recently someone on my team asked me for a bit of help in writing some JavaScript to check and uncheck the boxes on a subscription center when someone selects the Unsubscribe from All checkbox. You would think this code would be easy to find just floating around because so many people need it, but I actually couldn't find it all that easily. Since I'm probably not the only one who needs this code, why not share it?

Code to Check All Subscription Boxes

Make sure you update the field names in the quotes to match the field names in your instance, beginning with 'selectAll', which is the checkbox that, when selected, should populate all of the other checkboxes. Obviously, you should also remove any rows you don't need because you have less options than this example.

<script>

MktoForms2.whenReady(function (form) {

document.getElementById('selectAll').onclick = function() {

  if ( this.checked ) {

document.getElementById('mktosupplychainmanagement').checked = true;

document.getElementById('mktosmallmolecules').checked = true;

document.getElementById('mktobiologics').checked = true;

document.getElementById('mktoevents').checked = true;

document.getElementById('mktocommercialproductsupply').checked = true;

document.getElementById('mktoproductdevelopment').checked = true;

document.getElementById('mktogeneralmarketingcommunications').checked = true;

document.getElementById('Unsubscribed').checked = false;

  } else {

  // Did not Globally Subscribe

  }

  }

});

</script>

Code to Uncheck All Subscription Boxes

<script>

MktoForms2.whenReady(function (form) {

document.getElementById('Unsubscribed').onclick = function() {

  if ( this.checked ) {

document.getElementById('mktosupplychainmanagement').checked = false;

document.getElementById('mktosmallmolecules').checked = false;

document.getElementById('mktobiologics').checked = false;

document.getElementById('mktoevents').checked = false;

document.getElementById('mktocommercialproductsupply').checked = false;

document.getElementById('mktoproductdevelopment').checked = false;

document.getElementById('mktogeneralmarketingcommunications').checked = false;

document.getElementById('selectAll').checked = false;

  } else {

  // Did not Globally Unsubscribe

  }

  }

});

</script>

5562
12
12 Comments
SanfordWhiteman
Level 10 - Community Moderator

Browsers have built-in methods for selecting and iterating over elements. So this can be made tighter and easier to manage:

document.querySelector('#selectAll').onclick = function() {

  var dependentInputs = '#mktosupplychainmanagement,#mktosmallmolecules,#mktobiologics,#mktoevents';

 

  [].forEach.call(document.querySelectorAll(dependentInputs),function(input){

     input.checked = this.checked;

  }.bind(this));

}

This can also be wrapped up in a couple of dependency functions. I have some demos in other posts.

Anonymous
Not applicable

Thank you Sanford Whiteman​ as always for enhancing the code

Gerard_van_den_
Level 3

Nice info, thanks for sharing. In line with subscription center questions, maybe you can give me a hint for the following question: Assume a lead wants to UPDATE its email preferences via a link at the bottom of the email. How can I make sure he will see his current set of choices (multiple checkboxes for opt-in/opt-out - as stored in the marketo database) on this page, without depending on a cookie stored on his machine. I'm asking for this specifically, as more and more people tend to use a mix of mobile / desktop and I'm not sure whether there is a cookie. Is it possible to retrieve the current values from the database and show them on the subscription center page?

Thanks for any suggestions in this direction.

SanfordWhiteman
Level 10 - Community Moderator

If the page is hosted on Marketo, and the lead either visits the page via a tokenized (tracked) email link or has been associated in the past, then form PreFill will take care of filling in the current values.

This behavior is basically what defines the PreFill feature.

For other questions you should open a new thread in Products​.

Sheila_Baker__1
Level 1

Kristen, first, thanks so much for posting this code. I know I had a version of this at one point but couldn't find it.

I'm only looking to do the if Unsubscribed is checked to make the other subscription fields false... but I can't seem to figure out what I'm doing wrong. I am getting a console error of "Uncaught TypeError: Cannot set property 'onclick' of null". I've checked the field names multiple times. If anyone would be so kind as to take a look and at this page and let me know what is wrong, I would really appreciate it. Email Subscription Preference Center

Thanks so much for any ideas of what I'm doing wrong!

Sheila

SanfordWhiteman
Level 10 - Community Moderator

You definitely do not want to use document.getElementById here. It's not properly constrained to the individual form; also, it's the element name that ties it to the form field, not its id.

This will uncheck the secondary field names properly, disable them so they can't be selected as long as Unsubscribed is checked (the UX is contradictory if you don't do this), and also remember what their last checked value was in case they hit the Unsubscribe by mistake and want to go back a step.

MktoForms2.whenReady(function(form){   var formEl = form.getFormElem()[0],       arrayFrom = getSelection.call.bind([].slice),       unsub = formEl.querySelector("[name='Unsubscribed']"),       secondarySubs = arrayFrom(formEl.querySelectorAll("[name^='subscription']")),       secondaryLastEnabledStates;    unsub.addEventListener("click",function(e){             if (unsub.checked) {         secondaryLastEnabledStates = secondarySubs.map(function(el){                     var savedState = el.checked;           el.checked = false, el.disabled = true;           return savedState;         });       } else {         secondaryLastEnabledStates.forEach(function(savedState,idx){           var el = secondarySubs[idx];           el.checked = savedState, el.disabled = false;         });       }   }); });
SanfordWhiteman
Level 10 - Community Moderator

And of course the comments don't actually do code formatting so you should almost always open a thread instead.

Sheila_Baker__1
Level 1

Sanford, what can I say... once again you have come to the rescue! Thank you so much for your help. It works like a charm!

Sheila

Danielle_Wong
Level 8 - Community Advisor

Hi Kristen,

I'm somewhat new to scripts in code! Im wondering where I should be pasting this code? I put it just under the opening body tag in my landing page template and updated the field names to the field names in my form, and the unchecking/checking behavior didn't update as expected.

Any tips?

Thanks!

Danielle

SanfordWhiteman
Level 10 - Community Moderator

If you don't supply a URL, there's nothing for us to troubleshoot.