Use Checkboxes to select all Checkbox List input in a Form

[Gally_Articola]

Thank you Dave Roberts​, this is awesome! I tried adding this to my stylesheet though and it doesn't appear to have change anything. In the landing page itself, I changed all of the div widths to "auto" and left margin:0, do I need to change anything else to get this to work?

Apologies for the rudimentary questions, I really appreciate you helping me with taking our preference centers to the next level!

[Dave_Roberts]

It looks like the structure of the page has changed a little since I wrote that CSS, we might need to dial in the styles a bit to the new attributes to get this to work. The styles that have (in the previous example) the # symbol are targeting elements by their id="" value and it looks like that changed in the html. I've made a few adjustments to the CSS selectors so that those will target the 1st and 2nd element inside your wrapper (eg. the 1st row [header] and 2nd row [form]) instead of targeting the elements by id value. You should be able to replace the CSS you added from above and update it with this new piece to see the header and form center on the page.

/* header adjustments */ 
.wrapper > div:first-child { 
    width: 100%; 
    position: initial; 
    margin: 0px auto !important; 
    display: block; 
} 
/* wrapper adjustments - make it fluid (full-width) */ 
.mktoContent.wrapper { 
    max-width: 100% !important; 
} 
/* form container adjustments */ 
.wrapper > div:nth-child(2) { 
    width: 800px !important; /* adjust to control max-width of form */ 
    position: initial; 
    max-width: 100%; 
} 
/* form width */ 
form.mktoForm { 
    max-width: 100%; 
} 
/* eliminate horizontal scrolling in body */ 
body { 
    overflow-x: hidden; 
} 

the parts that changed are on line 2 and line 13. Those rules read something like "looks for the element with a class of wrapper, find a child element that is a div -- for the 1st rule: find the first-child (1st div, i.e. your header) -- for the 2nd rule: find the "nth-child(2)" (2nd div, ie. your form) -- and add some styles to those elements. This should help to account for changes to the id in the future.

Let me know if this works for you? I also saw that you were asking about styling the buttons you add to the form in place of the checkboxes for select/unselect all ... if you can setup a test page with this in play so I can see the buttons on my end and maybe post an example/image of what you'd like them to look like, I'd be happy to put together a little CSS and share it here.

[Gally_Articola]

Yes this absolutely worked for me, thank you!

I set up a test form here, though the buttons aren't actually functioning and I'm a little confused as to why: http://lp.powermag.com/testselect_deselectform.html

[Bryan_Epstein]

See the updates below, and it should resolve your issues. The button IDs "UnsubBtn" and "SuballBtn" would be used in the document.getElementById("X"). Then you would add the unsubscribe and subscribe fields into the area where you set the values of the subscription fields. However, it may be a good idea to only have one form field that you set to true and false rather than have both pWRUnsubscribedfromall & pWRSubscribedtoall as two separate fields.

Also, you didn't need the window.onload = function() { }; since the buttons were outside of the form.

// 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 false 
    form.vals({ "pWRUnsubscribedfromall":"false","pWROptCareersInPOWER":"false","pWROptAdvertisingSponsorshipOpportunities":"false"}); 
// 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 false 
    form.vals({ "pWRSubscribedtoall":true,"pWROptCareersInPOWER":"true","pWROptAdvertisingSponsorshipOpportunities":"true"}); 
// 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]

Thanks!

I've updated that test form and the "subscribe" button isn't working. I modified your code slightly, changing the "pwrsubscribedtoall" to "pwrunsubscribedfromall" since I agree, Subscribe to all isn't that helpful as a second field.

The "unsubscribe" button works perfectly, though! I can see it unchecking the checkboxes and turning the field values to "false" in the lead record.

[Bryan_Epstein]

There were quotes missing for setting that value to true, which was causing an issue with your syntax. Let me know if that works for you.

// When the button is clicked, get the form object and submit it   
    MktoForms2.whenReady(function (form) {   
// Set the values of subscription fields to true
    form.vals({ "pWRSubscribedtoall":"true","pWROptCareersInPOWER":"true","pWROptAdvertisingSponsorshipOpportunities":"true"});   

[Gally_Articola]

Nope, unfortunately still no luck!

I made two small changes to this code, changing the first subscription form value to turn pwrunsubscribedfromall to false. Is that what's screwing this up?

// When the button is clicked, get the form object and submit it   
    MktoForms2.whenReady(function (form) {   
// Set the values of subscription fields to false   
    form.vals({ "pWRUnsubscribedfromall":"false","pWROptCareersInPOWER":"true","pWROptAdvertisingSponsorshipOpportunities":"true"});  

[Bryan_Epstein]

One thing that you will want to make sure you do is mark pWRUnsubscribefromall to TRUE, which I just caught.

// Set the values of subscription fields to false   
    form.vals({ "pWRUnsubscribedfromall":"true","pWROptCareersInPOWER":"false","pWROptAdvertisingSponsorshipOpportunities":"false"}); 

Can you do one thing for me? Look into your person record when hitting each of the buttons and let me know if the actual field values are changing.

[Gally_Articola]

Absolutely! When I click the Subscribe to All button on this little form: http://lp.powermag.com/testselect_deselectform.html

Ideally it should change:

pWRUnsubscribedfromall: false

pWROptCareersInPOWER: true

pWROptAdvertisingSponsorshipOpportunities: true

But when I check the lead record and activity log and it shows I filled out the form, but it doesn't change the actual field values. So they stick as:

pWRUnsubscribedfromall: false

pWROptCareersInPOWER: no

pWROptAdvertisingSponsorshipOpportunities: no

[Bryan_Epstein]

I'm unsure as to why this would be happening, as the syntax of the code looks to be right (considering the unsubscribe portion works).

Just as a few tests (if these steps don't do anything, you can put it back to how things were to begin with)

• What if you were to bring the <div> for the JS before the <div> where the actual form is called?
• Instead of using MktoForms2.whenReady, change it to MktoForms2.whenRendered