Use Checkboxes to select all Checkbox List input in a Form

[SanfordWhiteman]

The allowed values to set Checkbox fields are

String "yes" / String "no"

Boolean true / Boolean false

In other words, String "true" and String "false" are not valid. That's why the code as written doesn't set the values in both directions. "false" only appears to work because of a bug in the library.

You don't want to use whenRendered when adding event listeners because you will duplicate them whenever a Visibility Rule is triggered; whenever you use whenRendered you need to place guards to ensure a DOM element, once rendered, only gets one event. whenReady is the correct event if you want to submit as soon as the form is ready.

[Bryan_Epstein · Accepted solution]

Thanks for the assist, Sandy. I remember seeing the String value="yes" attribute for the checkbox input type when looking at the code but overlooked that. Good to know what I should be doing on my end going forward.

Gally Articola​, here should be the full working code for you on this one:

// Find the button element that you want to Unsubscribe   
var Unsub = document.getElementById("UnsubBtn");   
Unsub.onclick = function() {   
// Change button text to say Please wait... (this is to mirror the action of the standard submit button)   
  Unsub.style.cssText = 'opacity: .5; filter: alpha(opacity=50); /* IE8 and lower */';   
Unsub.innerHTML = 'Hold yer horses...';   
// When the button is clicked, get the form object and submit it   
    MktoForms2.whenReady(function (form) {   
// Set the values of subscription fields to No and Unsubscribe to Yes for Checkbox Input Type 
    form.vals({ "pWRUnsubscribedfromall":"yes","pWROptCareersInPOWER":"no","pWROptAdvertisingSponsorshipOpportunities":"no"});   
// Submit the Form   
form.submit();   
//Add an onSuccess handler   
    form.onSuccess(function(values, followUpUrl) {   
        // Take the lead to a different page on successful submit, ignoring the form's configured followUpUrl   
        location.href = "http://lp.powermag.com/Unsubscribe.html";   
        // Return false to prevent the submission handler continuing with its own processing   
        return false;   
    });   
    });   
};  
// Find the button element that you want to Subscribe   
var Sub = document.getElementById("SuballBtn");   
Sub.onclick = function() {   
// Change button text to say Please wait... (this is to mirror the action of the standard submit button)   
  Sub.style.cssText = 'opacity: .5; filter: alpha(opacity=50); /* IE8 and lower */';   
Sub.innerHTML = 'Just a moment...';   
// When the button is clicked, get the form object and submit it   
    MktoForms2.whenReady(function (form) {   
// Set the values of subscription fields to Yes and Unsubscribe to No for Checkbox Input Type
    form.vals({ "pWRUnsubscribedfromall":"no","pWROptCareersInPOWER":"yes","pWROptAdvertisingSponsorshipOpportunities":"yes"});   
// Submit the Form   
form.submit();   
//Add an onSuccess handler   
    form.onSuccess(function(values, followUpUrl) {   
        // Take the lead to a different page on successful submit, ignoring the form's configured followUpUrl   
        location.href = "http://lp.powermag.com/Preference-Update.html";   
        // Return false to prevent the submission handler continuing with its own processing   
        return false;   
    });   
    });   
};   

[Gally_Articola]

Bryan Epstein​ and Sanford Whiteman​, thank you both so much! That worked perfectly! The checkbox fields checked and unchecked on both the form and in the lead record/activity log! This is fantastic and really helps take our preference centers to a new level of user friendliness.

Thank you again for all of your help!

[Dave_Roberts]

Here's some styling for the buttons on the test form you've setup. I went to the website and pulled the red gradient from the menu there.

You can adjust the padding to change the size of the button. The 10px is for the top and bottom. The 15px is for the left and right.

You can adjust the font-size and weight to match your page, I set it to 15px and bold to get close to the site's styles.

The last set of rules (line 12-14) are for the hover state which is set to be a solid red color. You could change that rgb(204,24,30) to anything you'd like [#ff0000 hex values are also ok here]

These styles are set to apply to any button that has the class of "unsub_button" as well as the submit button on a Marketo form.

button.unsub_button, form.mktoForm button.mktoButton {
    background: linear-gradient(to bottom, rgba(204,24,30,1) 0%,rgba(165,19,24,1) 100%) !important;
    padding: 10px 15px !important;
    color: #fff !important;
    border: 0px !important;
    cursor: pointer;
    font-size:15px !important;
    font-weight:bold;
}
button.unsub_button:hover, form.mktoForm button.mktoButton:hover {
    background: rgb(204,24,30) !important;
}

[Gally_Articola]

Thank you so much! This is easy to identify and I'm able to set up individual styles for these buttons.