Append "checked" checkbox values to form textarea

Develop, Build & Integrate CMS Development
1

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

2

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!

3

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