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

[Robb_Barrett]

Try something like this:

  function(form) {

      form.vals({"PostalCode":"{{lead.Postal Code}}",

                 "Phone":"{{lead.Phone Number}}",

                 "FirstName":"{{lead.First Name}}",

                 "LastName":"{{lead.Last Name}}",

                 "Company":"{{company.Company Name}}",

                 "Email":"{{lead.Email Address}}",

                 "City":"{{lead.City}}",

                 "Title":"{{lead.Job Title}}",  

                 "Address":"{{lead.Address}}"});

[SanfordWhiteman]

I think that was my code originally... it has the telltale signs.

Anyway, there wasn't any reason to switch fully to a custom HTML Element form for this.  Once you switch to using the embed code, as you noted, the form is no longer a Form Element that is known to the LP, so it is treated as insecure as it would be on a third-party site. Robb's workaround will work, but it isn't necessary.  Just add the form as a real Form Element and take out everything but the last <script>.

[Anonymous]

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

[SanfordWhiteman]

This behavior is implemented in JS.

[Anonymous]

<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]

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.

[Anonymous]

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

[SanfordWhiteman]

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

Because your checkboxes don't have the names referenced in the code.

The code looks for fields that begin with the (case-sensitive) string "subscription":

arrayFrom(formEl.querySelectorAll("[name^='subscription']"))

But your fields begin with the string "LeadPreference_" so you need to use that instead.

In future, please open a new thread and link to relevant content instead of commenting on old threads -- definitely don't update multiple old threads as that means the question will appear to not be answered.