Google Apps Script侧边栏表单提交问题：获取输入值并阻止跳转

这个问题其实是表单的默认提交行为在搞鬼——浏览器默认会把表单数据发送到指定URL（就是你看到的那个临时脚本URL），所以才会弹出空白页。咱们只需要阻止这个默认行为，同时手动处理输入值的获取和提示，就能轻松搞定啦！

步骤1：修改侧边栏的HTML代码 #

把你的表单改成下面这样，核心是阻止表单默认提交，并用客户端JS处理输入逻辑：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <!-- 给form添加onsubmit事件，用来阻止默认跳转 -->
    <form id="userForm" onsubmit="handleSubmit(event)">
      <label for="firstname">First Name:</label>
      <input type="text" id="firstname" name="firstname"><br><br>
      
      <label for="lastname">Last Name:</label>
      <input type="text" id="lastname" name="lastname"><br><br>
      
      <label for="gender">Gender:</label>
      <input type="radio" id="male" name="gender" value="male" checked>
      <label for="male">Male</label>
      <input type="radio" id="female" name="gender" value="female">
      <label for="female">Female</label><br><br>
      
      <button type="submit">Submit</button>
    </form>

    <script>
      function handleSubmit(event) {
        // 关键操作：阻止表单默认提交行为，彻底避免空白页跳转
        event.preventDefault();
        
        // 手动获取用户输入的所有值
        const firstname = document.getElementById('firstname').value;
        const lastname = document.getElementById('lastname').value;
        const gender = document.querySelector('input[name="gender"]:checked').value;
        
        // 弹出提示框显示提交的内容
        alert(`提交成功！\n名字：${firstname}\n姓氏：${lastname}\n性别：${gender}`);
        
        // （可选）如果需要把数据写入Google Sheets，调用服务器端脚本
        google.script.run.processForm(firstname, lastname, gender);
      }
    </script>
  </body>
</html>

步骤2：添加服务器端脚本（如需保存数据到Sheets） #

如果你需要把提交的数据写入Google Sheets，在你的.gs文件里添加这个函数：

function processForm(firstname, lastname, gender) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  // 将数据追加到表格的最后一行
  sheet.appendRow([firstname, lastname, gender]);
}

为什么这样能解决问题？ #

• event.preventDefault() 直接切断了浏览器的默认表单提交逻辑，不会再跳转到那个空白URL；
• 我们手动获取输入字段的值，用alert()直接在侧边栏内展示提交内容，全程不离开当前页面；
• 若需要持久化数据，google.script.run会安全地调用服务器端脚本，完成数据写入的同时保持侧边栏正常显示。

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