質問: food[3]; $.ajax({ data: { "entry.652964602": food_a, "entry.652964602": food_b, "entry.652964602": food_c, "entry.652964602": food_d } }); event.preventDefault(); }); }); ``` しかしそもそもこれだとチェックボックスが1つしか選択されていなくても送信できなくなりました。 (私の知識量ではそのようになったのか原因がわかっていません...。) ### 補足情報 サンプルを作成したのでご確認ください。 ・デモページ でもページ内のフォームはテスト用ですのでお好きにデータを送信いただいて構いません。 また、テスト用の送信先のGoogleフォームとスプレッドシートのURLも公開しますのでご自由にアクセスいただけます。 ・Googleフォーム ・Googleスプレッドシート ▼以下参考にしたサイト ・【jQuery】チェックされたチェックボックスを取得する ・stack overflow 今回質問するにあたった経緯が、私自身がやっておりますブログでこのWebサイトフォームからGoogleフォームへデータを送信するやり方の解説記事を掲載していた所、コメントでチェックボックスの複数選択の場合正常に動作しないと指摘を頂いたためです。 ↓その対象の記事 ・Googleform埋め込みでラジオボタンのデータを送信する方法 ・Googleform埋め込みで回答完了画面に遷移させない方法 あれやこれやと試行錯誤してみてはいるものの配列でvalue値を取得するところまではできてもAjaxでの制御が上手くできずに手詰まりの状態です。 GASを使用すればできるとの情報もありましたができれば外部のツールは使用せずにクリアしたいため、 解決策があればご教示いただきたい次第です。
回答: フォームデータとしてJavaScriptのオブジェクトを渡す場合は、同じ名前のメンバは最後のデータで上書きされてしまうとためうまくいかないのだと思います。 JavaScriptのFormDataクラスを利用して実現できないでしょうか。 jQueryが苦手なので、間違っているかもしれないですが、こんな感じかと思います。 ``` var data = new FormData; data.append('entry.1484943732', $("#googleform input[name=name]").val()); data.append('entry.1660322412', $("#googleform input[name=gender]:checked").val()); $("#googleform input[name=food]:checked").each(function () { data.append('entry.652964602', $(this).val()); }); $.ajax({ url: "https://docs.google.com/forms/d/e/1FAIpQLSdSqqBScuvl2wd0BYtgGFM7bK3_M01NTZyVm8Qt8dntDW4TJg/formResponse", data: data, processData: false, contentType: false, type: "POST", statusCode: { 0: function () { //送信に成功したときの処理 $("form").slideUp(); $('#clearopen').slideDown(); }, 200: function () { //送信に失敗したときの処理 $("form").slideUp(); $('#missopen').slideDown(); } } }); ``` ### 追記 FormDataをjQueryのajaxで送るのがうまくいかない場合は、`processData`と`contentType`に`false`を設定しないとうまくいかなかったんだった気がします。コードに追記してます。