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

関連記事

  1. Web

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

    そもそも圧縮ファイルってなに?圧縮ファイルとは、圧縮アルゴリズムを…

  2. Web

    Excelの代わりに無料で使えるオンラインアプリケーション!

    PCにExcelが入っていないけど買いたくない…たまに、「…

  3. Web

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

    自分のITリテラシーのレベル、把握してますか?そもそもITリテ…

  4. Web

    ダウンロードとインストールってなにがどう違うの?徹底解説してみた

    パソコンに詳しくなくてもダウンロードとインストールって聞いたことありま…

  5. Web

    ランサーズで稼げるの?副業初めての会社員が1ヶ月試した結果

    こんちゃす。Webサイト運用の会社に勤めて3年目。副業は今ま…

  6. Web

    USBにデータ保存は危険?データが消えるので注意!

    知人が「USB保存していたデータが勝手に消えたどうしよう…!!」…

コメント

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

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

最近の記事

  1. Diary

    災害対策。最低でもこれだけは準備しておけ!
  2. Web

    コピペするだけ!Web初心者でも簡単に作成できるフォーム作成ツール
  3. Web

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

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

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