SOLVED

Use Checkboxes to select all Checkbox List input in a Form

Go to solution
Highlighted
Level 10 - Community Moderator

Re: Use Checkboxes to select all Checkbox List input in a Form

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.

Highlighted

Re: Use Checkboxes to select all Checkbox List input in a Form

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;

});

});

};

View solution in original post

Highlighted

Re: Use Checkboxes to select all Checkbox List input in a Form

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!

Highlighted
Level 6

Re: Use Checkboxes to select all Checkbox List input in a Form

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.

Screenshot_041719_013103_PM.jpg

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;

}

Highlighted

Re: Use Checkboxes to select all Checkbox List input in a Form

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