从自定义Dialog表单获取值并传入函数作为字符串参数

要实现从自定义HTML对话框获取输入，再将其作为字符串参数传入Google Apps Script函数，你可以按以下方式调整现有代码：

1. 修正HTML对话框代码 #

原表单的<button type="submit">会触发默认提交行为，导致页面刷新，可能中断google.script.run的执行。保留表单验证功能的同时，需要在点击事件中阻止默认行为：

<form id="subject-form">
  <div class="form-inline">
    <input type="text" id="subject" placeholder="书签名称" name="subject" maxlength="16" required >
    <span>.</span>
    <div class="select-dropdown">
      <select id="selector">
        <option value="student">学生</option>
        <option value="cs">计算机科学</option>
        <option value="hr">人力资源</option>
      </select>
    </div>
    <span>.xyz.com</span>
  </div>
  <div class="btn-container" id="dialog-button-bar">
    <button type="submit" class="action" onclick="getLabel(event)">添加</button>
    <button id="dialog-cancel-button" onclick="google.script.host.close()">取消</button>
  </div>
</form>

2. 调整客户端JS逻辑 #

在getLabel函数中阻止表单默认提交，并完善回调逻辑，确保函数执行后关闭对话框：

function getLabel(event) {
  // 阻止表单默认提交，避免页面刷新
  event.preventDefault();
  
  // 获取输入框和下拉框的值
  const subj = document.getElementById('subject').value.trim();
  const subd = document.getElementById('selector').value;

  // 调用后端Google Apps Script函数
  google.script.run
    .withSuccessHandler(() => {
      // 执行成功后关闭对话框
      google.script.host.close();
    })
    .withFailureHandler(error => {
      // 可选：捕获执行错误，便于调试
      console.error('执行出错:', error);
    })
    .mailIt(subj, subd);
}

3. 后端Google Apps Script函数 #

确保你的.gs文件中存在对应的mailIt函数，接收传入的两个字符串参数：

function mailIt(subject, subdomain) {
  // 这里编写业务逻辑，比如使用参数处理数据或发送邮件
  console.log('书签名称:', subject);
  console.log('子域名:', subdomain);
  
  // 示例：发送邮件
  // GmailApp.sendEmail('目标邮箱@xyz.com', `书签：${subject}.${subdomain}.xyz.com`, '书签已成功添加');
}

关键细节 #

• 表单验证：保留required属性可让浏览器自动校验输入是否为空，减少无效提交。
• 参数清洗：用trim()去除输入值首尾空格，避免传入无效的空白参数。
• 错误处理：添加withFailureHandler能捕获后端执行异常，方便排查问题。

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