I'm using checkbox lists for all of my checkboxes, and have the main options grouped in fieldsets. When a user checks either "subscribe to all" or "unsubscribe from all" (which are currently set up as two boolean fields that feed data back to Marketo) I want to check or uncheck all checkbox lists in the fieldset. I'm using the script described in this discussion, which works perfectly when my "subscribe to all/unsubscribe from all" fields are using the checkbox input, but it falls apart when I change them to a checkbox list: Re: Marketo Form: Uncheck other boxes when a certain checkbox gets checked
How can I check or uncheck all fields in a fieldset using individual fields set up as checkbox lists?
Here's my form, hosted on a Marketo landing page.
Solved! Go to 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;
});
});
};
Whole recipe for that if you search my CodePen.
First time flipping thru your pens, holy smokes ... you're a busy dude Good stuff here
MktoForms2 :: Select All Checkbox https://codepen.io/figureone/pen/JKvRQv
Technically, you could do something along those lines. In this form specifically, the two checkboxes function are not mutually exclusive. You can have both checkboxes clicked at the same time. In using checkboxes, you're also adding a step to the subscribe/unsubscribe process by making someone scroll to the bottom of the page.
You could definitely check/un-check based off of your written logic, assuming that a user will click to update their profile at the bottom of the form.
Bryan Epstein and Dave Roberts I am 100% open to new suggestions for the best way to accomplish this if a checkbox is overly complicated and comes with plentiful problems! As some background, this is a change I'll need to make across multiple forms (20+ to be exact), so I'm definitely looking for the most streamlined way to check/uncheck all checklist lists in a form!
I suppose from a user experience perspective, I like the idea of having a singular "submit" button near the bottom for two reasons; if the user subscribes to all they may want to also update their contact information. If they unsubscribe from all, we'll want to capture the reason why so we can analyze our marketing strategy.
Would it maybe be possible to use one field (Unsubscribe from all) and set it as a radio button so the user can choose between Subscribe to all (with a value of NULL) or Unsubscribe from all (with a value of "yes")? Then have some javascript work off of that so the "NULL/subscribe to all" checks all checkboxes and "Yes/Unsubscribe from all" unchecks all checkboxes?
If that's doable, do you know how to split up a specific radio button list into two columns so the options are horizontally aligned in the center of the form?