CODEWITHSUNDEEP
javascripthtmlgoogle-apps-script
KPM
KPM

Reputation: 181

Return web form values to Google app script

I have a google sheets script that allows the user to enter certain data. I want to be able to pass these values back to a function in the google app script when the user clicks OK.

Here is the Google sheet script I am trying to get to work. The function checkLogin does get called until I try to pass the values to it from the web page.

The 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); 
}

and the web page code is as follows:

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

I hope someone can point me in the right direction. Thanks

Upvotes: 2

Views: 1754

Answers (1)

Alan Wells
Alan Wells

Reputation: 31300

The button to submit the login information needs to be changed. There needs to be a way to collect the input information. Right now none of the information in the form is being sent to the server. Either the form object needs to be sent to the server, or the values need to be retrieved some other way. If you want to use the form object, you must get it with this.parentNode 

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

Add a <script> tag to the index.html file with a success handler. Add withSuccessHandler() to the google.script.run server call.

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>

Server code:

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;
  }
}

Upvotes: 2

Related Questions