如何在Apps Script表单提交时将jsonRow加入formObject？

问题场景 #

你有一个侧边栏的Apps Script表单，HTML结构如下：

<form id="myForm" onsubmit="handleFormSubmit(this)">
 <div id="texts">
 </div>
 <div>
 <label for="optionList">Click me</label>
 <select id="optionList" ondblclick = "addText(event)" name="optionList" size="5">
 </select>
 </div>
 <br>
 <br>
 <div>
 <textarea id="message" name="message" rows="10" cols="30"></textarea>
 </div>
 <div id="textboxes"></div>
 <div id="insert"></div>
 <input type="submit" value="Submit" />
</form>

页面加载时会接收一行表格数据：

var jsonRow = <?= row ?>; //PASSED IN JSON

提交表单时会调用handleFormSubmit函数生成formObject并传给服务器端的processRowPopupHTML函数，现在需要把jsonRow合并到这个formObject里一起传递。

最佳实现方案 #

方案1：直接在提交函数中合并对象（最简洁）

这是最直接的处理方式，利用JavaScript对象扩展语法把jsonRow的属性合并到formObject中，服务器端可以直接访问到jsonRow的所有字段，和表单字段一起处理。

修改你的handleFormSubmit函数：

function handleFormSubmit(formObject) {
  console.log('handleFormSubmit')
  console.log(formObject)
  console.log(jsonRow)
  
  // 合并formObject和jsonRow，jsonRow字段会覆盖同名表单字段（若存在）
  const submitData = { ...formObject, ...jsonRow };
  
  google.script.run.withSuccessHandler(google.script.host.close).processRowPopupHTML(submitData);
}

如果不想让jsonRow覆盖表单字段，只需调换顺序：{ ...jsonRow, ...formObject }，这样表单字段优先级更高。

方案2：将jsonRow作为独立属性传递

如果希望在服务器端把jsonRow作为单独对象处理（比如它是嵌套结构，或者你想明确区分原始行数据和用户输入），可以直接给formObject新增一个属性：

function handleFormSubmit(formObject) {
  console.log('handleFormSubmit')
  console.log(formObject)
  console.log(jsonRow)
  
  // 添加jsonRow作为formObject的独立属性
  formObject.originalRow = jsonRow;
  
  google.script.run.withSuccessHandler(google.script.host.close).processRowPopupHTML(formObject);
}

服务器端的processRowPopupHTML函数中，就能通过e.originalRow访问原始行数据，同时e里还包含所有表单字段。

方案3：用隐藏表单字段传递（兼容原生表单场景）

如果你希望jsonRow作为表单的一部分被自动收集（比如未来可能切换提交方式），可以在HTML表单中添加隐藏字段，把jsonRow序列化为字符串后存入：

首先在表单里添加隐藏字段：

<form id="myForm" onsubmit="handleFormSubmit(this)">
  <!-- 原有表单内容 -->
  <input type="hidden" name="jsonRow" id="jsonRowHidden" />
  <input type="submit" value="Submit" />
</form>

然后在页面加载时设置隐藏字段的值：

// 页面加载完成后执行初始化
document.addEventListener('DOMContentLoaded', function() {
  // 将jsonRow序列化为JSON字符串存入隐藏字段
  document.getElementById('jsonRowHidden').value = JSON.stringify(jsonRow);
});

提交时formObject里会有jsonRow属性，值是序列化后的字符串，服务器端需要用JSON.parse(e.jsonRow)解析为对象。

选择建议 #

• 若需将jsonRow字段与表单字段平级处理，优先用方案1；
• 若需保留jsonRow的独立结构、方便区分原始数据与用户输入，用方案2；
• 若需兼容表单原生提交行为（比如不用google.script.run的场景），用方案3。

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