如何解决Google HtmlService中GAS函数读取表单ToggleButton值的运行失败问题

故障根因 #

• 在本地HTML Demo中你可以直接通过DOM访问自定义元素的value属性，但这是直接读取DOM节点的自定义属性，和google.script.run的序列化逻辑不是同一套规则
• google.script.run 序列化表单对象时，仅会提取带合法name属性的原生可提交表单控件的标准value属性值，自定义元素的自定义属性、仅修改展示文本的元素内容，都不会被自动传递到后端
• 原生可提交控件范围包括input、textarea、带name属性的提交按钮等，div、span等纯视觉元素哪怕加了自定义value属性，也不会被纳入序列化范围
• 如果自定义ToggleButton仅通过修改元素文本实现ON/OFF切换，没有同步更新带name属性的表单控件的标准value，后端拿到的form对象中根本不存在myButton字段，直接调用就会触发运行错误

修复方案 #

• 新增一个隐藏的原生input控件，作为状态存储的唯一标准载体，给该input设置和后端读取一致的name="myButton"，初始值设为OFF：

  <input type="hidden" name="myButton" id="toggleValue" value="OFF">
  <!-- 下方为自定义视觉切换按钮，可任意使用div/span/button实现 -->
  <div id="toggleBtn">OFF</div>
  

• 前端切换逻辑中，优先更新隐藏input的标准value属性，再同步更新视觉元素的展示内容：

  function toggleState() {
    const toggleValue = document.getElementById('toggleValue');
    const toggleBtn = document.getElementById('toggleBtn');
    const newState = toggleValue.value === 'OFF' ? 'ON' : 'OFF';
    toggleValue.value = newState;
    toggleBtn.innerText = newState;
  }
  

• 提交时仍按原逻辑传递整个原生form对象到后端submitData函数即可，此时后端可正常读取form.myButton的值

额外注意点 #

• 如果直接用button元素做视觉化切换按钮，必须给该button加name="myButton"属性，且切换状态时同步修改button的原生value属性，而非仅修改innerText
• 不要在后端直接读取前端视觉元素的自定义属性，仅以隐藏input的序列化值为准
• 确认传递给google.script.run的是原生form元素对象，而非自行封装的JS自定义对象

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