Question

我正在使用函数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>

不确定我在做什么错

Answer 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>

Answer 2

You need something like this:

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>

I hope this will help!

在Google表格中提交后，弹出式表单不会关闭

2 个答案: