Skip to main content
John_Danielson1
John_Danielson1
Level 3
March 15, 2016
Question

Marketo Form: Uncheck other boxes when a certain checkbox gets checked

  • March 15, 2016
  • 4 replies
  • 6767 views

I apologize for the crazy title. I wasn't really sure how to word this question!

We are creating a preference center right now. There will be four email types to select from as well as a global unsubscribe option. All of these fields will appear as checkboxes. I am trying to figure out a way to make the four options automatically uncheck if someone checks off the global unsubscribe option. I know I can create a visibility rule to hide those fields if the global unsubscribe is checked, but that doesn't uncheck those options. Is there a way to do this without having to use javascript?

JD

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

4 replies

SanfordWhiteman
SanfordWhiteman
Level 10
March 15, 2016

Search the Community. I put up a demo of this within the past 30 days. But no, you can't do it without JS.

John_Danielson1
John_Danielson1Author
Level 3
March 16, 2016

Hey Sanford - I searched the community, but I wasn't able to find your demo. Would you be able to paste the link in a reply?

Robb_Barrett
Robb_Barrett
Level 10
March 15, 2016

Vote for this:

Robb Barrett
    John_Danielson1
    John_Danielson1Author
    Level 3
    March 16, 2016

    Thanks Robb - I can't believe the only way to currently do this is with JS. Hopefully your idea will get someone's attention at Marketo.

    Dan_Stevens_
    Dan_Stevens_
    Level 10
    March 16, 2016

    In the meantime, you can process this request within a smart campaign, rather than at the form level.  So if someone selects "unsubscribe from all", your smart campaign would set the values of the other checkboxes to false.  From a user experience perspective, this isn't ideal (since the other checkboxes will still be checked) - but at least their preferences will be properly reflected in Marketo.

    A
    Anonymous
    April 25, 2018

    Doe's anyone know if this has been resolved or if you still need to use JS?

    SanfordWhiteman
    SanfordWhiteman
    Level 10
    April 25, 2018

    This behavior is implemented in JS.

    A
    Anonymous
    April 25, 2018

    <script src="//app-sjo.marketo.com/js/forms2/js/forms2.min.js"></script>

    <form id="mktoForm_1072"></form>

    <script>MktoForms2.loadForm("//app-sjo.marketo.com", "391-FAD-749", 1072);</script>

    <script>

    MktoForms2.whenReady(function(form){

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

        unsubscribeField='unsubscribefromAllEmails',

        unsubscribeEl=formEl.querySelector('#'+unsubscribeField),

        checkboxEls=formEl.querySelectorAll('INPUT[type="checkbox"]');

      unsubscribeEl.onclick = function(e){

        Array.prototype.forEach.call(checkboxEls,function(itm){

            if (itm !== unsubscribeEl && unsubscribeEl.checked) itm.checked = false;

        });

      }

    });

    </script>

    Is this the right HTML?

    SanfordWhiteman
    SanfordWhiteman
    Level 10
    April 25, 2018
    MktoForms2.whenReady(function(form) {
      var formEl = form.getFormElem()[0],
        unsubscribeField = "unsubscribefromAllEmails",
        unsubscribeEl = formEl.querySelector("[name='" + unsubscribeField + "']"),
        checkboxEls = formEl.querySelectorAll("INPUT[type='checkbox']"),
        arrayFrom = getSelection.call.bind([].slice);
          
      unsubscribeEl.addEventListener("click",function(e) {    
        if (unsubscribeEl.checked) {
          arrayFrom(checkboxEls)
            .filter(function(el){
              return el !== unsubscribeEl;
            })
            .forEach(function(el){
              el.checked = false;
            });
        }
      });
    });

    However, note this code is looking for all checkbox type inputs, regardless of whether they are subscription-related. This may cause confusion and better to put them in a fieldset that can be easily identified.

    When posting code, please use the Advanced Editor's syntax highlighter.

      A
      Anonymous
      July 5, 2018

      Sanford Whiteman​ Can you advise why this code it not working in this scenario? Email Preferences | Discovery Data

      Terms & ConditionsAccessibility statement

      Loading footer...