Google Apps Script web app: How to require at least one checkbox to be checked?

Question

I see a number of questions about "require at least one checkbox to be selected", but none for web apps developed in Google Apps Script.

In a Google Apps Script web app, I can easily require a radio button to be checked with:

<form id="requestNewKeys" onsubmit="handleFormSubmit(this)">
    <p>
        <label for="primaryToolRadioGroup">What is your primary purpose for requesting Tool XXXXXX</label>
    </p>
    <div role="radiogroup" id="primaryPurposeRadioGroup">
        <input type="radio" id="primaryPurpose0" name="primaryPurpose" value="Research" required="">
        <label for="primaryPurpose0">Research</label><br>
        <input type="radio" id="primaryPurpose1" name="primaryPurpose" value="Teaching" required="">
        <label for="primaryPurpose1">Teaching</label><br>
    </div>
    <input type="submit" value="Request License">
</form>

And the handleFormSubmit function:

function handleFormSubmit(formObject) {
    google.script.run.withSuccessHandler(updateResults).processForm(formObject);
}

But I can't figure out the equivalent to require one or more input type="checkbox"s to be checked. I know that Google Apps Script is highly similar to Javascript, but it seems that it's just enough different in this case to make the other solutions I'm finding here not work.

I have to apologize for my poor English skill. I cannot understand your expected goal. Can I ask you about the detail of your goal? — Tanaike, Jun 17 '22 at 00:22
I have a form that has a list of checkboxes, like: _ Option 1 _ Option 2 _ Option 3 I want the user to be required to choose at least one before submitting the form. — Ian Crew, Jun 17 '22 at 00:25
Thank you for replying. You want to use the checkboxes as the radio button. Is my understanding correct? — Tanaike, Jun 17 '22 at 00:27
Most answers that apply to html/javascript in general can be used for an Apps Script web app, you just have to get a little creative sometimes. [This answer](https://stackoverflow.com/a/65660416/11865956) for example looks like it should work with appscript. — BeRT2me, Jun 17 '22 at 01:13

score 1 · Accepted Answer · answered Jun 17 '22 at 01:54

You can try this approach where it only proceeds to the apps script processing if the number of checkboxes ticked is at least 1.

<!DOCTYPE html>
<html>
  <body>
    <form id="requestNewKeys">
      <p>
        <label for="primaryToolCheckboxGroup">What is your primary purpose for requesting Tool XXXXXX</label>
      </p>
      <div role="checkboxgroup" id="primaryPurposeCheckboxGroup">
        <input type="checkbox" id="primaryPurpose0" name="primaryPurpose" value="Research">
        <label for="primaryPurpose0">Research</label><br>
        <input type="checkbox" id="primaryPurpose1" name="primaryPurpose" value="Teaching">
        <label for="primaryPurpose1">Teaching</label><br>
      </div>
      <input type="button" value="Request License" onclick="checkForm()">
    </form>
  </body>
  <script>
    function checkForm() {
      var checkboxes = document.getElementsByName('primaryPurpose');
      var form = document.getElementById('requestNewKeys');
      var checked = 0;
      
      checkboxes.forEach(checkbox => { 
        if(checkbox.checked) 
          checked++; 
      });

      if(checked > 0)
        // google.script.run.withSuccessHandler(updateResults).processForm(form);
      else
        alert('Please check at least one checkbox!');
    }
  </script>
</html>

Google Apps Script web app: How to require at least one checkbox to be checked?

1 Answers1

After clicking Request License: