Google Script: get values from input forms
<p>I implemented an authentication process using google scripts but with hard-coded data for <code>username</code> and <code>password</code> values from <code>payload</code> option and I can't find a way to get these values from the html page when user presses the <code>Login</code> button...</p>

<p>Is there a way to get this values from input fields to <code>payload</code> option?</p>

<p>Here is my code:</p>

<p>HTML:</p>

<pre><code>  &lt;body&gt;
    &lt;form&gt;
        &lt;fieldset class='login'&gt;

            &lt;div class="required"&gt;
                &lt;label for="email"&gt;Email:&lt;/label&gt;
                &lt;input type="text" name="email" id="email" class="input-text" /&gt;
            &lt;/div&gt;

            &lt;div class="required"&gt;
                &lt;label for="pass"&gt;Password:&lt;/label&gt;
                &lt;input type="password" name="pass" id="pass" class="input-password" /&gt;
            &lt;/div&gt;
        &lt;/fieldset&gt;

        &lt;input type="submit" id="submit-btn" value="Login" name='Submit' class='btn'/&gt;
    &lt;/form&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        $('#submit-btn').click(function() {
          google.script.run.login();
        });
    &lt;/script&gt;
  &lt;/body&gt;
</code></pre>

<p>Google Script:</p>

<pre><code>function onOpen() {
  SpreadsheetApp.getUi()
      .createMenu('Menu')
      .addItem('Show sidebar', 'showSidebar')
      .addToUi();
}

function showSidebar() {
  var html = HtmlService.createHtmlOutputFromFile('login')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setTitle('SDR Tag Governance')
      .setWidth(300);
  SpreadsheetApp.getUi()
      .showSidebar(html);
}

function login(){
  var endpoint = 'login';
  var url = 'https://example.com/api/'+endpoint;
  var payload = {
    'username' : 'email', //Add here the value from #email input
    'password' : 'pass' //Add here the value from #pass input
  }
  var headers = {
    'Connection':'keep-alive',
    'Content-Type':'application/json;charset=utf-8',
    'Accept':'application/json, text/plain, */*',
  }
  var options = {
    'method' : 'post',
    'headers' : headers,
    'payload': JSON.stringify(payload),
  };
  var urlResponse = UrlFetchApp.fetch(url, options);
  Logger.log(urlResponse);
}
</code></pre>

<p>I tried to add this code to the HTML page:    </p>

<pre><code>&lt;script&gt;
    $('#submit-btn').click(function() {
      google.script.run
        .withSuccessHandler(function(response) {
          return urlResponse;
        })
        .login({
           email: $('#email').val(),
           pass: $('#pass').val()
        });
    });
&lt;/script&gt;
</code></pre>

<p>With GS function:</p>

<pre><code>function login(email,pass){
  var endpoint = 'login';
  var url = 'https://example.com/api/'+endpoint;
  var payload = {
    'username' : email,
    'password' : pass
  }
  var headers = {
    'Connection':'keep-alive',
    'Content-Type':'application/json;charset=utf-8',
    'Accept':'application/json, text/plain, */*',
    'Cookie':'...',
  }
  var options = {
    'method' : 'post',
    'headers' : headers,
    'payload': JSON.stringify(payload),
  };
  var urlResponse = UrlFetchApp.fetch(url, options);
  Logger.log(urlResponse);
}
</code></pre>

<p>But it doesn't work...</p>