将doGet逻辑移至loadForm子函数后Google Web App执行失败

一、修复“脚本执行完成但未返回任何内容”错误 #

错误原因 #

当访问Web App未携带v=form参数时，doGet函数没有返回任何内容，而Google Apps Script要求doGet必须返回HtmlOutput或TextOutput对象，因此触发报错。

修复方案 #

修改doGet函数，确保所有分支都有返回值，同时增加参数判断的安全性：

function doGet(e) {
  // 当URL参数v为form时加载表单，默认也加载表单
  if (e?.parameters?.v === 'form') {
    return loadForm();
  }
  // 默认返回表单，避免无参数时出错
  return loadForm();
}

function loadForm(){
  return HtmlService.createTemplateFromFile('index').evaluate()
    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

若后续需要扩展其他页面，可在else分支添加自定义返回：

function doGet(e) {
  if (e?.parameters?.v === 'form') {
    return loadForm();
  } else {
    return HtmlService.createHtmlOutput('<h1>欢迎访问</h1><p>请通过正确链接访问表单</p>');
  }
}

二、实现表单提交后隐藏指定字段 #

实现思路 #

1. 给需要隐藏的表单字段容器添加统一类名（如hide-after-submit）
2. 在提交成功的回调函数updateUrl中，通过DOM操作隐藏这些元素，仅保留疫苗卡上传按钮和提交按钮

步骤1：修改HTML代码，添加类名 #

给除疫苗卡和提交按钮外的所有<p>标签添加hide-after-submit类：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body style = "background:none transparent;">
    <link href="https://transformphillymassage.com/tpm-styles.css" rel="stylesheet" type="text/css">
    <link href="https://transformphillymassage.com/formstyles.css" rel="stylesheet" type="text/css">
    <form id="myForm" onsubmit="handleFormSubmit(this)">
      <!-- 需要隐藏的字段 -->
      <p class="hide-after-submit">
        <label for="FormControlFile">Legal Name:</label>
        <input name="name" class="form-control-file" type="text" size="35" required/>
      <br>
        <label for="FormControlFile">Preferred Name:</label>
        <input name="namePref" class="form-control-file" type="text" size="30">
      <br>  <label for="FormControlFile">Pronouns:</label>
        <input name="pronouns" class="form-control-file" type="text" size = "35">
      </p>
      
      <p class="hide-after-submit">
        <label for="FormControlFile">Choose One:</label>
        <select name = "ready" class="form-control-file" required/>
          <option value = "I'm ready to book!">I'm ready to book!</option>
          <option value = "I have questions.">I have questions.</option>
        </select>
      </p>    
      
      <p class="hide-after-submit">
        <label for="FormControlFile">email:</label>
        <input name="email" class="form-control-file" type="text" size = "40" required/>
     <br>
        <label for="FormControlFile">Phone Number:</label>
        <input name="phone" class="form-control-file" type="text" size = "28" />
      <br>
        <label for="FormControlFile">Best Times To Call:</label><br>
        <input name="callTimes" class="form-control-file" type="text" size="50"/>      
      </p>
      
      <!-- 保留的疫苗卡字段 -->
      <p>
        <label for="FormControlFile">Vacc Card:</label>
        <input name="myFile" class="form-control-file" type="file" required/>     
      </p>
      
      <p class="hide-after-submit">
        <label for="FormControlFile">Questions / Comments:</label><br>
        <textarea name ="questions" class="form-control-file" cols="45" rows="4"></textarea>
      <br>
      </p>
      
      <!-- 保留的提交按钮 -->
      <p>
        <button type="submit"><span class="charm spanlavender">Submit</span></button>
      </p>
  </form>
  <div id="urlOutput"></div>
    <script>
      function preventFormSubmit() {
        var forms = document.querySelectorAll('form');
        for (var i = 0; i < forms.length; i++) {
          forms[i].addEventListener('submit', function(event) {
            event.preventDefault();
          });
        }
      }

      window.addEventListener('load', preventFormSubmit);

      function handleFormSubmit(formObject){
        google.script.run.withSuccessHandler(updateUrl).withFailureHandler(onFailure).uploadFiles(formObject); 
      }

      function updateUrl(url) {
        var div = document.getElementById('urlOutput');
        if(isValidURL(url)){
          // 修复原代码中的引号错误
          div.innerHTML = '<div class="alert alert-success" role="alert">上传成功！<br>你可以上传另一个文件。</div>';
          // 隐藏所有需要隐藏的元素
          const hideElements = document.querySelectorAll('.hide-after-submit');
          hideElements.forEach(el => {
            el.style.display = 'none';
          });
          // 重置表单，清空文件输入
          document.getElementById('myForm').reset();
        } else {
          div.innerHTML = '<div class="alert alert-danger" role="alert">'+ url +'!</div>';
        }
      }

      function onFailure(error) {
        var div = document.getElementById('urlOutput');
        div.innerHTML = '<div class="alert alert-danger" role="alert">'+ error.message +'!</div>';
      }

      function isValidURL(string) {
        var res = string.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g);
        return (res !== null);
      }
    </script>
  </body>
</html>

步骤2：修复原代码的HTML语法错误 #

原updateUrl函数中存在引号错误：href="' + url + '" 已改为 href="' + url + '"，避免HTML渲染异常。

完整修复后的Google Apps Script代码 #

function doGet(e) {
  if (e?.parameters?.v === 'form') {
    return loadForm();
  }
  return loadForm();
}

function loadForm(){
  return HtmlService.createTemplateFromFile('index').evaluate()
    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function uploadFiles(formObject) {
  var folderID = "1nvhxUoj9uRlE0KpBNjW3cosIuuRpAQly"; // Massage / VaccinationCards 
  try {
    var folder = DriveApp.getFolderById(folderID);
    var fileUrl = "";
    //Upload file if exists 
    if (formObject.myFile.length > 0) {
      var name = formObject.name;
      var namePref = formObject.namePref;
      var pronouns = formObject.pronouns;
      var ready = formObject.ready;
      var email = formObject.email;
      var phone = formObject.phone;
      var callTimes = formObject.callTimes;
      var questions = formObject.questions;
      var blob = formObject.myFile;
      var file = folder.createFile(blob);
      fileUrl = file.getUrl();

    } else {
      fileUrl = null;
    }
    SpreadsheetApp.openById("1S6RCLu8SKl0u8cVrEKd-3B71w5A-lvz0ikw_LPzgH50").getSheetByName("cards")
      .appendRow([name, namePref, pronouns, ready, email, phone, callTimes, questions, fileUrl, new Date()]);
    GmailApp.sendEmail('atiqzabinski@gmail.com', 'New Vax Card Uploaded!', 'Hey sweetie, smells like business! https://docs.google.com/spreadsheets/d/1S6RCLu8SKl0u8cVrEKd-3B71w5A-lvz0ikw_LPzgH50/edit', {name: 'Vacc Card Robot'});
    return fileUrl;
  } catch (error) {
    return error.message;
  }
}

内容的提问来源于stack exchange，提问作者Atiq Zabinski