在 Google 表格中提交后弹出表单不会关闭答案

【问题标题】：Pop-up form will not close after submit in Google Sheets在 Google 表格中提交后弹出表单不会关闭
【发布时间】：2018-09-18 17:39:08
【问题描述】：

我正在使用我的函数 openDialog 来显示自定义 HTML 表单。它会提交正常，但不会在表单提交后关闭弹出窗口。我希望此表单在提交后关闭，或者显示带有“关闭”按钮的“thank-you.html”。

.gs

function openDialog() {
  var html = HtmlService.createHtmlOutputFromFile('index.html');
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
    .showModalDialog(html, 'Pop up Form');
}

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('index').setTitle('Adding Rows');
}

function doPost(e) {
  Logger.log(e);
}

function sendText(data) {
  var sheet = SpreadsheetApp.openById("some id").getActiveSheet();
  sheet.appendRow([data.form_field_1, data.form_field_2, data.form_field_3, data.form_field_4]);
  return 'success!';
}

HTML

<html>

<head>
  <base target="_top">
</head>

<body>
  <form onsubmit="sendText(event)" id="test-form">
    <div>
      <label>Field 1</label>
      <input type="text" name="form_field_1" placeholder="Field 1" />
    </div>
    <div>
      <label>Field 2</label>
      <input type="text" name="form_field_2" placeholder="Field 2" />
    </div>
    <div>
      <label>Field 3</label>
      <input type="text" name="form_field_3" placeholder="Field 3" />
    </div>
    <div>
      <label>Field 4</label>
      <input type="text" name="form_field_4" placeholder="Field 4" />
    </div>
    <div>
      <button type="submit" id="submit-form">Submit</button>
    </div>
  </form>
  <script>
    function sendText(e) {
      e.preventDefault();

      var data = {
        form_field_1: e.target['form_field_1'].value,
        form_field_2: e.target['form_field_2'].value,
        form_field_3: e.target['form_field_3'].value,
        form_field_4: e.target['form_field_4'].value
      }

      google.script.run
        .withSuccessHandler(function(response) {
          console.log(response);
          window.close();
        })
        .sendText(data);
    }
  </script>
</body>

</html>

不知道我做错了什么

【问题讨论】：

您正在阻止默认行为。
window.close() 对HtmlService UI 无效。查看 Apps 脚本中的客户端 HTML 指南。

标签： javascript html google-apps-script google-sheets

【解决方案1】：

通过这样做找到了修复。

<script>
    function sendText(e) {
      e.preventDefault();

      var data = {
        form_field_1: e.target['form_field_1'].value,
        form_field_2: e.target['form_field_2'].value,
        form_field_3: e.target['form_field_3'].value,
        form_field_4: e.target['form_field_4'].value
      }

      google.script.run.withSuccessHandler(function(response) {
        console.log(response);
        google.script.host.close()
      })
      .sendText(data);
    }
</script>

【讨论】：

【解决方案2】：

你需要这样的东西：

function closepopup()
{
    document.getElementById('test-form').style.display = 'none';
}
  
function sendtext()
{
    if(jQuery('#test-form').valid())
    {
        var formurl = 'submit url'; 
        jQuery.ajax({
          type: "POST",
          url: formurl,
          data: jQuery('#test-form').serialize(true), 
          success: function() 
          {
              // you can add here redirect the current page or success message
              closepopup();
          }
        });
    }
}

<div>
  <button type="submit" id="submit-form" onclick="sendtext()">Submit</button>
</div>

我希望这会有所帮助！

【讨论】：