Hello!
We have implemented a Subscription Center to help our users manage the content they receive. You can see the page here. We would like to have a better user experience by adding the following functionality:
If a user clicks the "unsubscribe" checkbox, all other checkboxes will be unchecked (confirming to the user that they are no longer subscribed to what was checked previously). Lastly, the unsubscribe box should stay checked.
the ID for the unsubscribe checkbox is "unsubscribed". We added the below script and it does not seem to be working.
$("#Unsubscribed").click(function() { //on click of unsubscribe checkbox
$(':checkbox').attr("checked", false); //uncheck all checkboxes
$("#Unsubscribed").attr("checked", true); //check the clicked one
});
Any thoughts as to how to fix this? Thank you!
Solved! Go to Solution.
Don't use pure jQuery (or any jQuery, IMO) on Marketo forms. You need to operate within the Marketo Forms API events framework.
MktoForms2.whenReady(function(form){
var formEl=form.getFormElem()[0],
unsubscribeField='Unsubscribed',
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;
});
}
});
Don't use pure jQuery (or any jQuery, IMO) on Marketo forms. You need to operate within the Marketo Forms API events framework.
MktoForms2.whenReady(function(form){
var formEl=form.getFormElem()[0],
unsubscribeField='Unsubscribed',
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;
});
}
});
Works perfect. Thank you for the note about the Marketo Forms API as well.