Subscription Center: how to select either unsubscribe or other, but not both

Hi Pia,

We had the exact same discussion a while ago and if you want this to happen visually on the screen you will have to add some JS on the landing page.

@Sanford Whiteman​ came with a very elegant and short JS that does the trick :

MktoForms2.whenReady(function(form) {

        var formEl = form.getFormElem()[0];

        // array of element collections, each collection defined by CSS selectors string

        // collections are mutually exclusive -- multiple selections are possible *within* a collection, but only one collection is allowed to have > 0 selections 

        var mutexCollectionsSelectors = ['#VIP__c, #Email_was_deleted__c', '#ContactReq__c'],

                mutexCollectionsEls = [];

        // get string selectors into collections

        mutexCollectionsSelectors.forEach(function(selectors, idx) {

                mutexCollectionsEls.push(formEl.querySelectorAll(selectors));

        });

        // iterate collections, attaching evt listeners that will scan all foreign collections on click

        Array.prototype.forEach.call(mutexCollectionsEls,function(collection, idx) {

                Array.prototype.forEach.call(collection, function(el) {

                        el.addEventListener('click', function(e) {

                                Array.prototype.forEach.call(mutexCollectionsEls,function(collection, iidx) {

                                        idx == iidx || Array.prototype.forEach.call(mutexCollectionsEls[iidx], function(el) {

                                                el.checked = false;

                                        });

                                });

                        });

                });

        });

});

The line that start with "var mutexCollectionsSelectors" will enable you to identify mutually exclusive fields, identified by ID.

-Greg