将网络表单值返回到Google应用脚本

时间:2016-07-14 22:38:41

标签: javascript html google-apps-script

我有一个google工作表脚本,允许用户输入某些数据。我希望能够在用户单击“确定”时将这些值传递回google应用程序脚本中的函数。

以下是我试图开始工作的Google表格脚本。在我尝试从网页传递值时,函数checkLogin会被调用。

gscript

function onOpen() {
   openLogin();
   SpreadsheetApp.getUi()
      .createMenu('Dialog')
      .addItem('Open', 'openLogin')
      .addToUi()
}

function openLogin() {
    var html = HtmlService.createHtmlOutputFromFile('index');
    SpreadsheetApp.getUi() 
      .showModalDialog(html, 'Login Form');
}

function checkLogin(user_name, user_password, staff, student) {
    SpreadsheetApp.getUi().alert(user_name); 
}

,网页代码如下:

<!DOCTYPE html>
<html>
<head>
   <base target="_top">
</head>
<body>
  <form>    
    First name:&nbsp;&nbsp;
    <input type="text" name="user_name"><br><br>
    Last name:&nbsp;&nbsp;
    <input type="password" name="user_password"><br><br>
    Staff or Student?
    <br>

    <input type="radio" name="staff" value="staff" checked> Staff<br>
    <input type="radio" name="student" value="student"> Student<br>
    <br><br>

    <input type="button" value="OK"
    onclick="google.script.run.checkLogin(user_name, user_password, staff, student)" />

    <input type="button" value="Close"
    onclick="google.script.host.close()" />

  </form>

 </body>
</html>

我希望有人能指出我正确的方向。感谢

1 个答案:

答案 0 :(得分:1)

需要更改提交登录信息的按钮。需要有一种收集输入信息的方法。现在,表单中没有任何信息被发送到服务器。表单对象需要发送到服务器,或者需要以其他方式检索值。如果要使用表单对象,则必须使用this.parentNode

onclick="google.script.run.withSuccessHandler(showMsgForLoginAttempt)
  .checkLogin(this.parentNode)" />

使用成功处理程序向<script>文件添加index.html标记。将withSuccessHandler()添加到google.script.run服务器调用。

index html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form>    
        First name:&nbsp;&nbsp;
        <input type="text" name="user_name"><br><br>
        Password:&nbsp;&nbsp;
        <input type="password" name="user_password"><br><br>
        Staff or Student?
        <br>

        <input type="radio" name="staff" value="staff" checked> Staff<br>
        <input type="radio" name="student" value="student"> Student<br>
        <br><br>
        <input type="button" value="OK"
             onclick="google.script.run.withSuccessHandler(showMsgForLoginAttempt).checkLogin(this.parentNode)" />

        <input type="button" value="Close"
             onclick="google.script.host.close()" />



    </form>

  </body>

        <script>
             window.showMsgForLoginAttempt = function(valueFromServer) {
               console.log('showMsgForLoginAttempt ran');
             alert('Your attempt: ' + valueFromServer);
             };
        </script>
</html>

服务器代码:

function checkLogin(formObject) {
  var passwordsMatch;
  Logger.log('formObject: ' + formObject)
  Logger.log('formObject: ' + formObject.user_name);
  formObject
  //SpreadsheetApp.getUi().alert('Hello, world!');
  passwordsMatch = true;  //check password

  if (passwordsMatch) {
    return true;
  } else {
    return false;
  }
}