お世話になります。
GoogleAppsScriptを使ってGoogleフォームの画面を自由にカスタマイズする!
https://masa-enjoy.com/gas-createform
上記を参考に簡単なGoogleフォームのカスタマイズを作成いたしました。
以下、ソース
<!DOCTYPE html> <html> <head> <base target="_top"> <meta charset="utf-8"> <title></title> </head> <body> <main> <div class="container"> <form id="form" action="" method="POST"> <h1>アンケート</h1> <div class="block"> <label for="cost" class="block-title"><ruby>好きな食べ物はありますか? <rt></rt></ruby>1</label> <div class="radio-wrapper"> <input type="radio" id="q1a" name="q1" class="radio-inline__input"> <label for="q1a" class="radio-inline__label">はい</label> <input type="radio" id="q1b" name="q1" class="radio-inline__input"> <label for="q1b" class="radio-inline__label">いいえ</label> </div> </div> <div class="block"> <label class="block-title">好きな食べ物は?</label> <div class="radio-wrapper"> <input type="checkbox" id="q2a" name="q2" class="radio-inline__input"> <label for="detail1" class="radio-inline__label">カレー</label> <input type="checkbox" id="q2b" name="q2" class="radio-inline__input"> <label for="detail2" class="radio-inline__label">ラーメン</label> </div> <div class="button-wrapper"> <span class="submit">送信</span> </div> </form> </div> <form id="mG61Hd" action="https://docs.google.com/forms/d/e/〇○○/formResponse" method="POST"> <input type="hidden" id="q1_val" name="entry.(数値)" value=""> <input type="hidden" id="q2_val" name="entry.(数値)" value=""> </form> </main> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ //送信ボタンクリック時hedden項目のformをサブミットする $('.submit').on('click', function(e){ $('#mG61Hd').submit(); }); //項目が変更されたときに対応するhidden項目の値も変更 $('input[name="q1"]').on('change', function(e){ $('#q1_val').val($(this).next().text()); }); $('input[name="q2"]').on('change', function(e){ $('#q2_val').val($(this).next().text()); }); }); </script> </body> </html>
最初は問題なく動いていたように見えたのですが、
テスト送信を繰り返すうちにチェックボックスの値(value)が片方しか取得できないことに気が付きました。
カレーのみ、ラーメンのみは取得できても、両方チェックを入れるとカウントされません。
調べた限りでは、eachでループ処理をしてチェックされた全ての値を取得できるようですが、
今回の様にvalueがない場合がよく分かりませんでした。
以下、動かしてみたサンプルコード
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js?ver=1.12.2'></script> <script type="text/javascript"> $(function(){ $('input[name="checkboxname1"]').on('change', function(e){ $('input[name=checkboxname1]:checked').each(function() { var v = $(this).val(); alert(v); }); }); }); </script> <input type="checkbox" name="checkboxname1" id="checkboxid1" value="1"> <input type="checkbox" name="checkboxname1" id="checkboxid2" value="2"> <input type="checkbox" name="checkboxname1" id="checkboxid3" value="3"> <input type="button" value="実行" id="btn">
片方は取得できるので、何か少し処理をプラスするだけでチェックした項目がすべて取得できるような気もするのですが、
チェックボックスの値取得に関してはもっと複雑な処理をしないといけないのでしょうか?
Googleフォームの場合、nameにentry.(数値)を入れれば正常に動作をするのは承知しておりますが、今後もっと多くの選択肢を持ったフォームを作成予定なので、出来ればjqueryで動作させたいという次第です。
回答2件