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>

5312
12
12 Comments
Danielle_Wong
Level 8 - Community Advisor
SanfordWhiteman
Level 10 - Community Moderator

First place to look is always your F12 Console.

There you'll see this error:

pastedImage_0.png

Going to the offending line of code you'll see you're trying to use the global MktoForms2 object before it exists in the page. On a Marketo-hosted LP, custom form behaviors JS needs to be put before the closing </body> tag because it depends on the forms2.min.js being loaded first, and Marketo may inject the forms2.min.js anywhere in the body, depending on how you constructed the template.

The behaviors code itself is (to put it mildly) not good. As I noted above, you shouldn't be using getElementById(). But at least it has a chance of sort-of working if you put it in the right place on the page.