Googleフォームとの紐づけ・不具合、やっと解消しました~!やったことまとめ!

具体的には、submitメソッドが効いていない、サンクスページに遷移しない、サンクスページに遷移するけど回答データが受け取れていない、という3つの問題がありました。

まず、問題を解決した結論から書きます。以下のしょーごさんの記事を参考にして、jQueryのコードの3行目にある

$('#form').submit(function (event) {

の「#form」を「form」に変えたらうまくいきました。

(この逆で、「form」から「#form」へ変えたらうまくいったという声はちらほらあったんですが、まさか逆のパターンでうまくいくとは思わず、しばらくハマっておりました・・・ajaxやらjavascriptの細かい部分まで調べていました)

Googleフォームとの紐づけでsubmitがうまく効かない時は、submitボタンのid=”submit”となってしまわないか、という点にも注意した方が良さそうです。

それと、今回は最終的な手として一から構造を見直してみる(真似てみる)、ということもしました。

一からそれをやるのは、正直めんど・・・少しばかり頭の切り替えをしなければいけないので、最終的な手としています。

具体的な手順は以下の通りです。

①作業中のフォルダを保存しておいて、新しくデモ用のフォルダを作り、そこに一からしょーごさんの記事からHTMLとJavaScriptのコードをコピペして動作を確かめる、ということをしました。

とりあえずは動作の仕組みを理解することに重点を置くため、DOCTYPE宣言やjQueryの宣言だけ最低限しておきます。

②そうやって作った最低限のひな型に、自分の作成したGoogleフォームからactionとnameの値を埋め込むことで、動作確認をします。そこで問題なく動いていることが確認できることが、重要です。そこで動いていなければそもそもの実装の初期段階でつまずいている可能性が高いからです。ここで問題がクリアできていれば、次に進みます。

③HTML構造を自分のものと、ひな型とを見比べて、構造に違いがないか見比べてみる。大枠として、formタグの中に複数のdivタグがあり、さらにそのdivタグの中にinputタグやtextareaタグがあることを確認しました。※私はこの時点でdivタグでなくpタグで囲んでしまった部分が一部あったので修正しました。

③までを終えた時点で、ある程度原因は絞れてきたと考えました。

まず構造があっていれば、あとは命令する側(jQuery側)に問題があると考え、一つ一つ検証してみました。

具体的には「alert(“OK”);」をコードの命令文の1文毎に差し込み、処理がどこまで出来ているかを確認しました。

以上

「alert(“OK”);」がうまく機能して、パソコン画面上にポップアップ画面が表示されればその手前まで処理は届いています。

もし届いていなければ、その手前のコードに問題があると考え、問題である1文を突き止めました。

※ここまでにかかることはある程度「間違い探し」のようなもので、モチベーションは維持できるのですが、問題文1文を見つけた後、その原因を解消するまでが、非常に長かったです。

冒頭にも挙げた

$(‘#form’).submit(function (event) {

部分に原因があると突き止めました。ここで焦点を当てたのはsubmitです。この部分について調べまくりました^^;

しかし、input[type=”submit”]タグのidやclass名を変更してもうまくいかず、そもそもHTML構造に致命的な部分があるのかと考えましたが、それは上記の最終手段でクリアしています。

※お手本となる構造(実際に正常に動いている)と見比べることが出来ているので、問題部分は絞れています。

「もしかして$(‘#form’)なのか・・・・?」と考え、そこに考えをシフトして、指定をid名から要素名に変えることで、今回の問題が解消されたのです・・・( ̄▽ ̄;)逆にこの部分は「id名だとうまくいった」という方の記事が複数見つかっていたので、「ここは大丈夫だろう」と検討すらしていませんでした・・・orz盲点でした。こんなことってあるんですね^^;そしてなぜ要素名でうまくいったのかは謎です(笑)逆に要素名だとうまくいかず、id名でうまくいった人の例も、なぜそうなったのか分かりません(笑)もし誰か分かる人がいらっしゃったら教えて頂けると幸いです。

今回、素人目線ながらこんなことがあったと残しておきます。誰かひとりでも、この記事が参考になれば幸いです。

この記事を書いた人