form-to-google-sheets
form-to-google-sheets copied to clipboard
jamiewilson
Using checkboxes - only the first selected option appears
Hi everyone! I'm very new to programming so please forgive me if this obvious, but how do I get all checked boxes to show up on the sheet if I use a group of checkboxes? They all use the same name, and I was hoping to get all checked boxes to appear in one cell, perhaps separated by a comma the way google forms do. But when I try, only the first option selected appears in that cell.
Help will be very much appreciated - thank you so much!
I'm having this same issue. Also happens when multiple form elements have the same 'name'.
I got the solution for this trouble!! use different name for different check boxes to collect the data. and add those to the sheets' fields!! and it works just fine
#39 pull request has been requested!! Waiting for the Author to take action on these
The way I worked around this was to name my checkbox inputs something different. For example if we were having a contest and wanted to have all of the users names populate on which particular email voted for and have them all grouped into one column. I named my checkbox input fields "contestant" and then named a hidden input text field "contestants" which corresponds with my column in the google sheet. On submit of the form after e.preventDefault(), I just loop through the contestants and push them into an array and then join them with a comma and space afterwards and set that value to the "contestants" input value:
form.addEventListener('submit', e => { e.preventDefault() let contestants = document.querySelectorAll('input[name="contestant"]'); let contestants_string = [] let contestants_input = document.querySelector('input[name="contestants"]'); for(var i = 0; i < contestants.length; i++){ contestants_string.push(contestants[i].value); } contestants_string = contestants_string.join(', '); contestants_input.value = contestants_string; fetch(scriptURL, { method: 'POST', body: new FormData(form)}) .then(response => console.log('Success!', response)) .catch(error => console.error('Error!', error.message)) })
Anthony
The way I worked around this was to name my checkbox inputs something different. For example if we were having a contest and wanted to have all of the users names populate on which particular email voted for and have them all grouped into one column. I named my checkbox input fields "contestant" and then named a hidden input text field "contestants" which corresponds with my column in the google sheet. On submit of the form after e.preventDefault(), I just loop through the contestants and push them into an array and then join them with a comma and space afterwards and set that value to the "contestants" input value:
form.addEventListener('submit', e => { e.preventDefault() let contestants = document.querySelectorAll('input[name="contestant"]'); let contestants_string = [] let contestants_input = document.querySelector('input[name="contestants"]'); for(var i = 0; i < contestants.length; i++){ contestants_string.push(contestants[i].value); } contestants_string = contestants_string.join(', '); contestants_input.value = contestants_string; fetch(scriptURL, { method: 'POST', body: new FormData(form)}) .then(response => console.log('Success!', response)) .catch(error => console.error('Error!', error.message)) })
@AnthonySpain What do you mean hidden input? Can you send us your whole checkboxes input form? It will help a lot because your code still didn't work in mine. Thank you
