Subscription Preference Center Page Forms and Unchecking All Checkboxes on Select of Unsubscribe from All

Question

Hello I have this landing page for our subscription preference center:
engage.livelyme.com/preference-center-jennifer.html?mkt_unsubscribe=1&mkt_tok=[…]TYyQVo0b1RxVDFYRzU3OHB3NGZUS05jZlVmQTl0Sm4yR0lBVys3czRCTCJ9
 
When someone adds a new, additional subscription it all works as expected but when you select the last option to unsubscribe from all we want the checks in the boxes above to disappear. How can this be accomplished?
 
I should add that I did add the JS that @SanfordWhiteman suggested (wrote?) in this post but it is not working:
https://codepen.io/figureone/pen/JKvRQv?editors=0010
https://nation.marketo.com/t5/Product-Discussions/Marketo-Form-Uncheck-other-checkboxes-when-Unsubscribe-from-all/m-p/298938#M168558
 
Thanks!

SanfordWhiteman · Accepted Answer

That code requires you to set up the form in a specific way, which your form doesn't conform to.

For your particular situation you want

  MktoForms2.whenReady(function(mktoForm){
     const formEl = mktoForm.getFormElem()[0];

     const unsubscribeTrigger = "Unsubscribed",
           unsubscribableDeps = [
             "subscriptionSalesEngagement",
             "subscriptionEducationandInsights",
             "subscriptionLivelyProductsandNews",
             "subscriptionPersonalizedandSeasonalContent",
             "subscriptionMonthlyNewsletter"
           ];
     
     const dependencies = [
         {
           primaries : [unsubscribeTrigger],
           cascadeSecondaries : unsubscribableDeps
             .map(function(unsubscribable){
               return { field : unsubscribable, negate : true, filterPrimaryValues : ["yes"] }
             })
         },
         {
           primaries : unsubscribableDeps,
           cascadeSecondaries : [
              { field : unsubscribeTrigger, negate : true, filterPrimaryValues : ["yes"] }
           ]
         }
     ];

     const mktoNegations = {
       "yes" : "no",
       "no" : "yes"
     };

     dependencies.forEach(function(dep){
        dep.primaries.forEach(function(primary){
          formEl.querySelector("[name='" + primary + "']").addEventListener("click",function(){
            const primaryValue = mktoForm.getValues()[primary];

            const mktoFormsObj = dep.cascadeSecondaries
              .filter(function(fieldDesc){
                 return fieldDesc.filterPrimaryValues.indexOf(primaryValue) != -1;
              })
              .reduce(function(acc,nextField){                       
                acc[nextField.field] = nextField.negate ? mktoNegations[primaryValue] : primaryValue;
                return acc;
              },{});

            mktoForm.setValues(mktoFormsObj);
          });
        });
     });
  });

Sign up

Login with SSO

Login to the community

Login with SSO