前提・実現したいこと
Webサイトにフォームを設置し、
入力されたデータをAjaxを使用してGoogleフォームにデータを送信→Googleスプレッドシートにデータを転記。
といったものを再現しようとしています。
現状は“データを送信”に関してはできていますが一部に関してデータを送信できない状態です。
▼流れ
0. フォームに記入
0. 「送信ボタン」をクリック
0. AjaxでValue値を取得しGoogleフォームへ転送 ※ここで問題が発生しています。
0. Googleフォームからスプレッドシートへ転記
発生している問題
実際に発生している問題は、
「チェックボックスが複数選択された場合にデータが転送できない」といったものです。
テキストボックス、ラジオボタンは正常にデータ転送ができています。
チェックボックスが1つのみ選択されている場合も転送ができています。
しかし、チェックボックスが2つ以上選択された場合は転送できない。
といった状態です。
※チェックボックスが2つ以上選択されていてもその他のテキストボックスやラジオボタン等のデータの転送へは影響していません。
該当のソースコード
HTMLフォーム内のnameが一致したもののvalue値を取ってきて、
AjaxでGoogleフォーム内の一致するIDの位置に送信している形になります。
html
1<div class="box" id="googleform"> 2 <form> 3 <div> 4 <label for="name">名前</label> 5 <input id="name" type="text" name="name"> 6 </div> 7 8 <div> 9 <p>性別</p> 10 <label><input type="radio" name="gender" value="男" />男</label> 11 <label><input type="radio" name="gender" value="女" />女</label> 12 </div> 13 14 <div> 15 <p>好きな食べ物</p> 16 <label><input type="checkbox" name="food" value="ラーメン" />ラーメン</label> 17 <label><input type="checkbox" name="food" value="寿司" />寿司</label> 18 <label><input type="checkbox" name="food" value="パスタ" />パスタ</label> 19 <label><input type="checkbox" name="food" value="おにぎり" />おにぎり</label> 20 <label><input type="text" name="food" value="その他の回答" /></label> 21 </div> 22 <input id="submitBtn" type="submit" value="送信"> 23 </form> 24 25 <div id="clearopen"> 26 <h2>送信完了しました。ありがとうございました。</h2> 27 </div> 28 <div id="missopen"> 29 <h2>送信に失敗しました。ページを更新して再度送信してください。</h2> 30 </div> 31</div>
js
1$(document).ready(function () { 2 $("#googleform").submit(function (event) { 3 //名前を取得 4 var name = $("#googleform input[name=name]").val(); 5 //性別を取得 6 var gender = $("#googleform input[name=gender]:checked").val(); 7 //好きな食べ物を配列で取得 8 var food = $("#googleform input[name=food]:checked").map(function () { 9 return $(this).val() 10 }).get().join(','); 11 12 //検証ツール確認用 13 console.log(food); 14 15 $.ajax({ 16 url: "https://docs.google.com/forms/d/e/1FAIpQLSdSqqBScuvl2wd0BYtgGFM7bK3_M01NTZyVm8Qt8dntDW4TJg/formResponse", 17 data: { 18 "entry.1484943732": name, 19 "entry.1660322412": gender, 20 "entry.652964602": food 21 }, 22 type: "POST", 23 dataType: "xml", 24 statusCode: { 25 0: function () { 26 //送信に成功したときの処理 27 $("form").slideUp(); 28 $('#clearopen').slideDown(); 29 }, 30 200: function () { 31 //送信に失敗したときの処理 32 $("form").slideUp(); 33 $('#missopen').slideDown(); 34 } 35 } 36 }); 37 event.preventDefault(); 38 }); 39});
試したこと
もともとは以下のコードは.mapを使用しておらず.valで取得していましたが、
チェックボックスが複数選択の場合は先頭の一つしか取得できないということでしたので.mapに変更しました。
js
1var food = $("#googleform input[name=food]:checked").map(function () { 2 return $(this).val() 3}).get().join(',');
問題は以下の箇所だと考えており、今現状は変数foodの中に'ラーメン','寿司'のような形でデータが入っています。
js
1$.ajax({ 2data: { 3 "entry.1484943732": name, 4 "entry.1660322412": gender, 5 "entry.652964602": food 6},
entry.652964602の中に'ラーメン','寿司'としてGoogleフォームに送るから反映されないものだと考え
.mapで取得した配列から配列ごとに個別の変数を定義してみましたがこちらもうまくいきませんでした。
その時のコードは以下です。
※先ほど上に書いたコードから変更ない部分はハショってます
js
1$(document).ready(function () { 2 $("#googleform").submit(function (event) { 3 //好きな食べ物を配列で取得 4 var food = $("#googleform input[name=food]:checked").map(function () { 5 return $(this).val() 6 }).get(); 7 8 var food_a = food[0]; 9 var food_b = food[1]; 10 var food_c = food[2]; 11 var food_d = food[3]; 12 13 $.ajax({ 14 data: { 15 "entry.652964602": food_a, 16 "entry.652964602": food_b, 17 "entry.652964602": food_c, 18 "entry.652964602": food_d 19 } 20 }); 21 event.preventDefault(); 22 }); 23});
しかしそもそもこれだとチェックボックスが1つしか選択されていなくても送信できなくなりました。
(私の知識量ではそのようになったのか原因がわかっていません…。)
補足情報
サンプルを作成したのでご確認ください。
・デモページ
でもページ内のフォームはテスト用ですのでお好きにデータを送信いただいて構いません。
また、テスト用の送信先のGoogleフォームとスプレッドシートのURLも公開しますのでご自由にアクセスいただけます。
・Googleフォーム
・Googleスプレッドシート
▼以下参考にしたサイト
・【jQuery】チェックされたチェックボックスを取得する
・stack overflow
今回質問するにあたった経緯が、私自身がやっておりますブログでこのWebサイトフォームからGoogleフォームへデータを送信するやり方の解説記事を掲載していた所、コメントでチェックボックスの複数選択の場合正常に動作しないと指摘を頂いたためです。
↓その対象の記事
・Googleform埋め込みでラジオボタンのデータを送信する方法
・Googleform埋め込みで回答完了画面に遷移させない方法
あれやこれやと試行錯誤してみてはいるものの配列でvalue値を取得するところまではできてもAjaxでの制御が上手くできずに手詰まりの状態です。
GASを使用すればできるとの情報もありましたができれば外部のツールは使用せずにクリアしたいため、
解決策があればご教示いただきたい次第です。
回答4件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/12/19 08:47