Google表格在提交时自定义侧边栏重新加载表单

时间:2017-09-22 21:49:02

标签: jquery html forms google-sheets sidebar

我对Google Scripts和jQuery相对较新。让我们说我可能已经足够让自己陷入困境了!我正在尝试创建自定义UI侧边栏,以便将数据输入Google表格。我使用这篇文章中的代码作为起点(感谢Cooper分享!):Cooper's Code

一切都很美妙,但我需要在每次提交后自动重置表单,以便接受下一个条目。理想情况下,我想要一个带有按钮的确认对话框来创建一个新条目。我修改了代码如下,但是我的" New Entry"按钮什么都不做:

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

我确信这是一件简单的事情,我的新手大脑并没有被抓住,但任何帮助都会受到赞赏!

1 个答案:

答案 0 :(得分:0)

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

code.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();

}