web-dev-qa-db-ja.com

google apps script:html-フォーム送信、入力値の取得

フォーム付きのサイドバーを使用してユーザー入力を取得しようとしています。コードはGoogleスプレッドシートファイルにバインドされています。

Code.gs:

function onOpen() {
  SpreadsheetApp.getUi()
      .createMenu('Custom Menu')
      .addItem('Show sidebar', 'showSidebar')
      .addToUi();
}

function showSidebar() {
  var html = HtmlService.createHtmlOutputFromFile('Page')
      .setTitle('My custom sidebar')
      .setWidth(300);
  SpreadsheetApp.getUi()
      .showSidebar(html);
}

function processForm(formObject) {
  var ui = SpreadsheetApp.getUi();
  ui.alert("This should show the values submitted.");
}

Page.html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Please fill in the form below.<br><br>
    <form id="myForm" onsubmit="google.script.run.processForm(this)">
      First name:
      <input type="text" name="firstname"><br><br>
      Last name:
      <input type="text" name="lastname"><br><br>
      Gender:<br>
      <input type="radio" name="gender" value="male" checked> Male<br>
      <input type="radio" name="gender" value="female"> Female<br>
      <input type="radio" name="gender" value="other"> Other<br>
      <br>
      <input type="submit" value="Submit">
    </form><br>
    <input type="button" value="Cancel" onclick="google.script.Host.close()" />
  </body>
</html>

[送信]を押すと、指定されたメッセージでアラートが開き、ブラウザが空白のページを示すURLで開きます( https://n-ms22tssp5ubsirhhfqrplmp6jt3yg2zmob5vdaq-0lu-script.googleusercontent.com/userCodeAppPanel?firstname =&lastname =&gender = male )。送信された値をアラートに表示したいのですが、余分なページを開かないようにします。

非常に単純な問題ですが、私が読んだものはすべて本当に複雑すぎるようです。ユーザー入力を取得する最も簡単な方法を知りたいだけです。

5
Sara

Htmlフォームの場合、デフォルトの送信方法はGETであり、送信されたフォームデータはページアドレスフィールドに表示されると思います。

メソッドをPOSTに変更してみてください。

  <form id="myForm" onsubmit="event.preventDefault(); google.script.run.processForm(this) method="post"">

このリンクを参照してください https://www.w3schools.com/html/html_forms.asp#method

編集:私はこれを試しましたが、event.preventDefault();を追加する必要があることに気付きました。

0
shonendumm