GAS HTML でフォームを作成

実現したいこと

GAS HTML でフォームを作成したが、チェックボックスのみ
選択した値が帰ってこない

発生している問題・エラーメッセージ

TypeError: Cannot read properties of undefined (reading 'join')
at processForm(コード:21:30)

→sheet.appendRow([[formData.name, formData.gender,formData.email,formData.animal.join(','),formData.option]]);

該当のソースコード

index.html側

<!DOCTYPE html> <html> <head> <meta charset = "tuf-8"> <title>HTMLのお勉強</title> <base target="_top"> <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?> </head> <body>

<h1>入力フォーム</h1>
<form id="Form">
  <label for="name">名前:</label><br>
  <input type="text" id="name" name="name"><br>

  <label for="email">メールアドレス:</label><br>
  <input type="email" id="email" name="email"><br>

  <label for="gender">性別:</label><br>
  <input type="radio" id="gender_man" name="gender" value="男性">男性
  <input type="radio" id="gender_women" name="gender" value="女性">女性<br>

  <label for="animal">チェックボックス：</label><br>
  <input type="checkbox" name="animal[]" value="犬">いぬ
  <input type="checkbox" name="animal[]" value="猫">ねこ
  <input type="checkbox" name="animal[]" value="うさぎ">うさぎ<br>


  <label for="option">プルダウン:</label><br>
  <select name="option">
  <option value="option1">オプション1</option>
  <option value="option2">オプション2</option>
  <option value="option3">オプション3</option><br>

</select>

  <input type="button" value="送信" onclick="submitForm()">
</form> 

<script>
  function submitForm() {
    google.script.run.processForm(document.getElementById("Form"));
    document.getElementById("Form").reset();
  }
</script>

</body> </html>

GAS側
const mysh = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();

function doGet(e) {

const template = HtmlService.createTemplateFromFile('index');
return template.evaluate();

}

function processForm(formData) {

Logger.log(formData.animal.join(','))
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
sheet.appendRow([[formData.name, formData.gender,formData.email,formData.animal.join(','),formData.option]]);
}

上記で実行すると　スプレッドシートには
チェックボックスだけ値が帰ってこない
GASの実行エラーでは　
sheet.appendRow([[formData.name, formData.gender,formData.email,formData.animal.join(','),formData.option]]);
のところがエラーになる

YAmaGNZ

2024/12/16 08:49

formData.animalには何が入っているのか確認されましたか？

punpun211

2024/12/16 11:17

何も取得出来ていませんでした　　null

行動規範の内容に同意します

回答1件

まずHTMLのチェックボックス部分ですが

HTML
1  <label for="animal">チェックボックス：</label><br>
2  <input type="checkbox" name="animal" value="犬">いぬ
3  <input type="checkbox" name="animal" value="猫">ねこ
4  <input type="checkbox" name="animal" value="兎">うさぎ

このようにname="animal[]"ではなくname="animal"と指定します。

GASでの受け取りですが
animal=[犬, 兎]
といった感じで選択した項目が配列として受け取れます。
選択されていない場合はnullになります。
ですので

Javascript
1  Logger.log(formData);
2  if (formData.animal == null){
3    Logger.log('選択なし');
4  } else {
5    Logger.log(formData.animal.length);
6    for(var i=0;i<formData.animal.length;i++){
7      Logger.log(formData.animal[i]);
8    }
9  }

といった感じで受け取れるかと思います。

追記

上記の方法ですと選択が1つの場合は配列ではなく文字列として渡されるので

HTML
1    <script>
2      function submitForm() {
3        var animals = [];
4        var form = document.getElementById("Form");
5        for (var i = 0; i < form.animal.length; i++) {
6          if (form.animal[i].checked) {
7            animals.push(form.animal[i].value);
8          }
9        }
10        google.script.run.processForm(form.name.value, form.email.value, form.gender.value, animals, form.option.value);
11      }
12    </script>

javascript
1function processForm(name, email, gender, animals, option) {
2  
3  Logger.log('name = ' + name);
4  Logger.log('email = ' + email);
5  Logger.log('gender = ' + gender);
6  Logger.log(animals);
7  Logger.log(animals.join(','));
8  Logger.log('option = ' + option);
9}

といった感じでHTML側にてanimalの配列を作成し、その配列を引数として渡すことでいくつ選択されていたとしても配列として渡されるので問題はないかと思います。

投稿2024/12/16 12:16

編集2024/12/17 02:12

YAmaGNZ

総合スコア10516

punpun211

2024/12/16 12:34

ありがとうございます問題なく選択した値が受け取れましたただ、実は最初に　name="animal"　と、[]はつけないで書いていましたがそれでも値は受け取れなかったのですなので　いろいろ調べた中に　name="animal[]" と書かれたものを見つけ実践したわけですが・・・何か間違えていたんでしょうね・・ありがとうございます

punpun211

2024/12/17 01:03

追記ですチェックボックスの選択肢が１つだと sheet.appendRow([[formData.name, formData.gender,formData.email,formData.animal.join(','),formData.option]]); でエラーになる事がわかりました・・・orz

punpun211

2024/12/17 03:20

度々ありがとうございますようやく理解する事が出来ました joinについてよく理解していなかったです配列を連結して１つの文字列にするのがjoin 配列要素が１つなら　連結するものがないのでエラーってことですね自分なりに考えてみました GAS側を下記にしたらOKでした function processForm(formData) { let animal ; if (formData.animal == null ){ animal= ""; }else if(formData.animal.length==1){ animal = formData.animal[0] ; }else if(formData.animal.length>=2){ animal = formData.animal.join(','); } var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); sheet.appendRow([formData.name, formData.gender,formData.email,animal,formData.option]); }

YAmaGNZ

2024/12/17 03:58

＞配列要素が１つなら連結するものがないのでエラーってことですねそうではなく選択が１つの場合は animal = ["犬"] という要素が１つの配列としてではなく animal = "犬" といった感じで文字列(String)として渡され選択が複数の場合は animal = ["犬","猫"] といった感じで配列(Array)として渡されていたという感じです joinはArrayのメソッドでStringにはないので選択が１つの場合はString.joinと解釈されエラーとなっていたということになります

行動規範の内容に同意します