So I’m trying to do some nifty stuff as per usual and I’ve seen SOME tools in HS that kind of go in this direction but, doesn’t exactly get there 100%.
On my form I have a multi-checkbox field called Ice Cream
It has 3 options: A, B, and C
Further down in the form I have a hidden field that is also a checkbox called Flavors
It has 3 options: 1, #2, #3
I’m looking for a way to make the hidden field Flavors auto select 1, when A is checked in the Ice Cream field.
I’m aware that this can be done with jQuery and I have some background in it so I’m willing to take that route first and just modify the pasted code in the module I’m using. But I was just wondering if anyone else had heard of this and found a solution to it, or could maybe point me in the right direction towards that. Thanks so much in advance.
In the event this is something, “new,” I will of course post the solution as soon as it’s completed.
I defer to smarter people like @tjoyce and @piersg (don’t tell them I said that), but I am pretty sure you are going to need to do some JS shennanigans to make that work
Hi @nlafakis, if you want Ice cream A to select Flavor 1, B selects 2, and C selects 3, then you could do this:
var label1 = document.getElementById('[ID FOR THE LABEL OF THE FIRST MULTI CHECKBOX GROUP}');
var options1 = label1.nextElementSibling.childNodes[0].childNodes;
var label2 = document.getElementById('[ID FOR THE LABEL OF THE SECOND MULTI CHECKBOX GROUP}');
var options2 = label2.nextElementSibling.childNodes[0].childNodes;
for(i = 0; i < options1.length; i++) {
let check = options1[i].children[0].children[0];
let index = i;
check.addEventListener('click', (e) => {
let checked = e.target.checked;
checked == true ? options2[index].children[0].children[0].checked = true : options2[index].children[0].children[0].checked = false;
});
}
e.g. in this example, when I click the first option in the first list, the first option in the second list gets selected (the id for label1 is “learn_from_webinar-label” and label2 is “hs_buying_role-label” in this example).
Just one question: Where does this get pasted? I tried within the HS form code, and also separately as a .js linked script. Should it be in the html prior to the /body tag? or maybe in the header of the html?
@nlafakis if you’re adding the form via a script I would do this:
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: "[portal id]",
formId: "[form id]"
});
// add script here in Hubspot global form onFormReady event
window.addEventListener('message', event => {
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
var label1 = document.getElementById('[ID FOR THE LABEL OF THE FIRST MULTI CHECKBOX GROUP]');
var options1 = label1.nextElementSibling.childNodes[0].childNodes;
var label2 = document.getElementById('[ID FOR THE LABEL OF THE SECOND MULTI CHECKBOX GROUP]');
var options2 = label2.nextElementSibling.childNodes[0].childNodes;
for(i = 0; i < options1.length; i++) {
let check = options1[i].children[0].children[0];
let index = i;
check.addEventListener('click', (e) => {
let checked = e.target.checked;
checked == true ? options2[index].children[0].children[0].checked = true : options2[index].children[0].children[0].checked = false;
});
}
}
});
</script>
I am SO sorry that I haven’t gotten back on this! I’ve been knee deep in another integration project. I will try this out today and get back to you on it, though I’m very sure it will work. You are for sure the HS Jedi /bow!
