Web

Googleフォーム埋め込みでチェックボックス複数選択させデータを送信する方法

今回は
Googleform埋め込みで回答完了画面に遷移させない方法 -改-

としまして、以前記事で、

Ajaxを使用してGoogleフォームを埋め込んで画面遷移させない方法を解説しました。

 

しかしあるとき「チェックボックスが複数選択された時データ送信されてないよ」

とのコメントがきまして、これはまずいとのことで色々手を探して解決しました。

▼以前の記事
①,Googleform埋め込みでラジオボタンのデータを送信する方法
②,Googleform埋め込みで回答完了画面に遷移させない方法

 

ので、以前の記事から改修したコードを公開します。

 

デモページはこちら。

 

まずHTMLから。

HTMLは、ほとんど同じですが一点だけ変わったのが、

前回はinputタグのnameの中に、

Googleフォームから取得した「entry.00000000」入れていたと思いますが、

任意のものに変更しています。

nameの中は好きに決めてください。

 

ただ前回と変わらず、value=””の中身は好きに決めれないので注意。

作成したフォームのvalueとGoogleフォームのvalueが
一致している必要があります
( ´⊿`)y-~~

 

 

次にJS

前回からそこそこ書き方が変わりましたが、

以前の記事で取得した「entry.000000000」を当てはめる場所を変えただけなので

そこまで複雑でもありません。

 

作成したHTMLフォームのそれぞれのvalue値を3~13行目で取得して、

15行目以降でGoogleフォームに送信している状態です。

 

デモページを作成したのでご自由にフォームを送信していただいて結構です。

送信先のGoogleフォーム(転記先スプレッドシート)も公開しているのでご自由にアクセスください。

 

デモページ:Googleフォームチェックボックス複数選択データ送信のデモ
データ送信先Googleフォーム:https://docs.google.com/forms/d/e/1FAIpQ……
データGoogleスプレッドシート:https://docs.google.com/spreadsheets/d/1nMb…..

 

補足

jsの10~13行目のコードは、チェックボックスエリアにある

最下部のテキストボックスを取得してくるためのコードなので、

もしチェックボックスエリアにデモページのような「その他の回答」

のようなボックスを設けない場合は消しても動作します。

「その他の回答」部分を設けるのであれば記述したままにしてください。

 

関連記事


ピックアップ記事

  1. Googleフォーム埋め込みでチェックボックス複数選択させデータを送信する方法
  2. 目標がない人はやりたいことリスト100をやってみよう
  3. 新しいことへのあと一歩の勇気が出ない人へ「勇気はあとからついてくる。」

関連記事

  1. Web

    Webデザイナーにオススメの業務効率化PCソフト8選

    これからデザインやコーディングをしていくつもりの人に、私オススメの業務…

  2. Web

    画像1枚なおしただけでAdSense審査に通過した話

    こんにちは~AdSense審査でことごとく落とされていたのに1…

  3. Web

    【Brackets】コーダーオススメのエディタはブラケッツ一択!

    みなさんエディタは何を使っていますか?そもそもエディタとは、端…

  4. Web

    メモ帳ソフト”CatMemoNote”の設定から使い方まで解説!

    Catmemonote(キャットメモノート)とはCatMemoNo…

  5. Web

    Web業界用語。ガチ初心者は覚えた方がいい必須用語10個

    どうもWeb業界に生きるつかぽんです。今回…

  6. Web

    非同期(Ajax)でPHPの関数を実行させサーバーにフォルダとファイルを作成する

    最近PHPを勉強し始めたので備忘録がてら書きます。今回は、H…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Web

    chrome/IE/FireFoxのサイズ解釈
  2. Diary

    目標がない人はやりたいことリスト100をやってみよう
  3. Web

    自分のITリテラシーのレベル把握してる?リテラシーレベル表
  4. Web

    圧縮ファイルの種類別紹介!
  5. Diary

    【Surface Lapotop】をサブ機に!
PAGE TOP