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

jenlively · ‎03-18-2021

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-Unsubsc...

Thanks!

SanfordWhiteman · ‎03-18-2021

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);
          });
        });
     });
  });

View solution in original post