Append "checked" checkbox values to form textarea

[tmcmillan99]

I have a page that contains numerous checkboxes and a form. I am trying to append the values of the checkboxed that have been checked to the form's textarea. I have not been able to get it to work and do not know what I am missing. Here is my javascript:

<script>
  // Request Training
function captureCheckboxValues() {
    const checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
    const checkedValues = [];
    checkboxes.forEach(checkbox => {
        checkedValues.push(checkbox.value);
    });
    const textarea = document.getElementByClassName('hs-fieldtype-textarea');
    textarea.value = checkedValues.join('\n');
}
</script>

Do I have something wrong with my code? Or is there something special required due to it being Hubspot form? Any suggestions/recommendations would be greatly appreciated.

Thanks,

Terry McMillan

[GRajput · Accepted solution]

Hi @tmcmillan99 

Your function is correct and it should work for simple HTML form. But I assume you are trying to do this in a HubSpot form and for that, you need to use form callback functions. This doc will help you with that. Here is also an example: 

<script>
  hbspt.forms.create({
    portalId: '',
    formId: '',
    onFormReady: function ($form) {
        // Request Training
    function captureCheckboxValues() {
        const checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
        const checkedValues = [];
        checkboxes.forEach(checkbox => {
        checkedValues.push(checkbox.value);
        });
        const textarea = document.getElementByClassName('hs-fieldtype-textarea');
        textarea.value = checkedValues.join('\n');
    }
    },
  });
</script>

I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.
Thanks!

[tmcmillan99]

@GRajput Awesome! Thanks for the additional information and clarification. Exactly what I needed. I had a feeling that I was missing something in regards to it being a Hubspot form.