Having one field option in a multi-checkbox, change the default property of another field:

[nlafakis]

Hey all!,

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.

[nlafakis]

Hey @piersg,

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?

[piersg]

@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>

[nlafakis]

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!

[piersg · Accepted solution]

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).

If you want to map it differently i.e. A selects 2 instead of 1, then you would need to map that.

[nlafakis]

That's freakin' AMAZING! I will try this out ASAP!

[dennisedson]

@nlafakis 

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 😀