unable to reference to .gs file within the google script created HTML

Question

I am developing a web application using google script. I created a simple login page within the google script. However, I tried to reference the .js(.gs) to the button to sent out the login info but it keep showing 400 error. I know I probably do it the wrong way. I just don't know how to do it.

please help

  <script src="/login_click.gs"></script>///reference to the gs file
   .....
  <button type="submit" onclick="login()">Login</button>///the login button

Answer 1

Client-to-server comms in GAS

That's because .gs files are executed on the server and not on the client side. Apps script has its own implementation of asynchronous server calls via the google.script.run client API.

Using google.script.run is quite simple, you just call server-side functions by prepending their name like this google.script.run.yourServerFunction(yourParameters) and, if your server-side function has return statement, you can operate on the returned value via a callback client-side function passed to withSuccessHandler() method (if you want to pass anything client-side to callback function after server-side function finishes executing, you can do so via withUserObject(dataToPass) method call - just remember that the first argument of the success handler fucntion is always the value returned from server-side).

Modified html

In your case, a simple modification will do the trick (assuming you are calling a server-side login() function:

<script type="text/javascript">
  function success(fromServer,fromClient) {
    //doSomething on success;
  }

  function failure(error) {
    //doSomething on failure;
  }

  function login() {
    var myObject = ''; //add something to callback on success;

    google.script.run
    .withSuccessHandler(success)
    .withFailureHandler(failure)
    .withUserObject(myObject)
    .login();
  }
</script>

Useful links

1. google.script.run reference ;
2. Client-server communication guide ;