提交时谷歌表格自定义侧边栏重新加载表单答案

【问题标题】：Google Sheets custom sidebar reload form on submit提交时谷歌表格自定义侧边栏重新加载表单
【发布时间】：2017-09-22 21:49:02
【问题描述】：

我对 Google Scripts 和 jQuery 比较陌生。让我们说我可能知道的足够让自己陷入困境！我正在尝试创建一个自定义 UI 侧边栏，用于将数据输入到 Google 表格中。我使用这篇文章中的代码作为起点（感谢 Cooper 的分享！！）：Cooper's Code

一切都很好，但我需要在每次提交后自动重置表单，以便准备好接受下一个条目。理想情况下，我想要一个带有按钮的确认对话框来创建新条目。我修改了代码如下，但我的“新条目”按钮什么也没做：

    <!DOCTYPE html>
        <html>
          <head>
            <base target="_top">
          </head>
          <body>
          <div id="data">
            <br />Text 1<input type="text" size="15" id="txt1" />
    <br />Text 2<input type="text" size="15" id="txt2" />
    <br />Text 3<input type="text" size="15" id="txt3" />
    <br />Text 4<input type="text" size="15" id="txt4" />
    <br /><input type="button" value="Log Entry" id="btn1" />
  </div>
  <div id="resp" style="display:none;">
    <h1>Your data has been received.</h1>
    <input type="button" value="New Entry" id="btn2" />
  </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
      $(function() {
        $('#btn1').click(validate);
        $('#btn2').click(openDialog);
        $('#txt4').val('');
        $('#txt3').val('');
        $('#txt2').val('');
        $('#txt1').val('')
      });

      function setResponse(a)
      {
        if(a)
        {
          $('#data').css('display','none');
          $('#resp').css('display','block');
        }
      }

      function validate()
      {
        var txt1 = document.getElementById('txt1').value || ' ';
        var txt2 = document.getElementById('txt2').value || ' ';
        var txt3 = document.getElementById('txt3').value || ' ';
        var txt4 = document.getElementById('txt4').value || ' ';
        var a = [txt1,txt2,txt3,txt4];
        if(txt1 && txt2 && txt3 && txt4)
        {
          google.script.run
            .withSuccessHandler(setResponse)
            .getData(a);
            return true;
        }
        else
        {
          alert('All fields must be completed.');
        }
      }

      function loadTxt(from,to)
      {
          document.getElementById(to).value = document.getElementById(from).value;
      }

     console.log('My Code');

     function openDialog() {
     var html = HtmlService.createHtmlOutputFromFile("index");
     html.setTitle('Gmf Sent Msg Form'); 
     SpreadsheetApp.getUi().showSidebar(html);
    }
   </script>
  </body>
</html>

我确信这是我的新手大脑无法理解的简单问题，但感谢您提供任何帮助！

【问题讨论】：

HtmlService 和 SpreadsheetApp 是服务器端而不是客户端。您可能想阅读this。

标签： jquery html forms google-sheets sidebar

【解决方案1】：

如果您希望对话框正常工作，您需要执行以下操作：

代码.gs

function openMyDialog()
{
 var html = HtmlService.createHtmlOutputFromFile("index");
 html.setTitle('Gmf Sent Msg Form'); 
 SpreadsheetApp.getUi().showSidebar(html);
}

在你的 javascript 中是这样的：

function openDialog()
{
  google.script.run.openMyDialog();

}

【讨论】：

这很好用！我是新人，所以我不能投票，但如果可以的话。
你可以检查答案。