Uncategorized具体的には、submitメソッドが効いていない、サンクスページに遷移しない、サンクスページに遷移するけど回答データが受け取れていない、という3つの問題がありました。問題を解決した結論から書きます。{の「#form」を「form」に変えたらうまくいきました。(この逆で、「form」から「#form」へ変えたらうまくいったという声はちらほらあったんですが、まさか逆のパターンでうまくいくとは思わず、しばらくハマっておりました・・・ajaxやらjavascriptの細かい部分まで調べていました)Googleフォームを静的サイトに埋め込みカスタマイズ【非同期通信Ajax】|しょーごログこんにちは、フリーランスエンジニア歴5年のしょーごです。みなさん静的サイトにフォームの埋め込みを行う際、これまで難儀しshogo-log.comGoogleフォームとの紐づけでsubmitがうまく効かない時は、submitボタンのid=”submit”となってしまわないか、という点にも注意した方が良さそうです。それと、今回は最終的な手として一から構造を見直してみる(真似てみる)、ということもしました。一からそれをやるのは、正直めんど・・・少しばかり頭の切り替えをしなければいけないので、最終的な手としています。具体的な手順は以下の通りです。1作業中のフォルダを保存しておいて、新しくデモ用のフォルダを作り、そこに一からしょーごさんの記事からHTMLとJavaScriptのコードをコピペして動作を確かめる、ということをしました。動作の仕組みを理解することに重点を置くため、DOCTYPE宣言やjQueryの宣言だけ最低限しておきます。↓2そうやって作った最低限のひな型に、自分の作成したGoogleフォームからactionとnameの値を埋め込むことで、動作確認をします。そこで問題なく動いていることが確認できることが、重要です。そこで動いていなければそもそもの実装の初期段階でつまずいている可能性が高いからです。ここで問題がクリアできていれば、次に進みます。↓3HTML構造を自分のものと、ひな型とを見比べて、構造に違いがないか見比べてみる。大枠として、formタグの中に複数のdivタグがあり、さらにそのdivタグの中にinputタグやtextareaタグがあることを確認しました。※私はこの時点でdivタグでなくpタグで囲んでしまった部分が一部あったので修正しました。3までを終えた時点で、ある程度原因は絞れてきたと考えました。構造があっていれば、あとは命令する側(jQuery側)に問題があると考え、一つ一つ検証してみました。具体的には「alert(“OK”);」をコードの命令文の1文毎に差し込み、処理がどこまで出来ているかを確認しました。「alert(“OK”);」がうまく機能して、パソコン画面上にポップアップ画面が表示されればその手前まで処理は届いています。届いていなければ、その手前のコードに問題があると考え、問題である1文を突き止めました。※ここまでにかかることはある程度「間違い探し」のようなもので、モチベーションは維持できるのですが、問題文1文を見つけた後、その原因を解消するまでが、非常に長かったです。{部分に原因があると突き止めました。ここで焦点を当てたのはsubmitです。この部分について調べまくりました^^;しかし、input[type=”submit”]タグのidやclass名を変更してもうまくいかず、そもそもHTML構造に致命的な部分があるのかと考えましたが、それは上記の最終手段でクリアしています。※お手本となる構造(実際に正常に動いている)と見比べることが出来ているので、問題部分は絞れています。̄;)逆にこの部分は「id名だとうまくいった」という方の記事が複数見つかっていたので、「ここは大丈夫だろう」と検討すらしていませんでした・・・orz盲点でした。こんなことってあるんですね^^;そしてなぜ要素名でうまくいったのかは謎です(笑)逆に要素名だとうまくいかず、id名でうまくいった人の例も、なぜそうなったのか分かりません(笑)もし誰か分かる人がいらっしゃったら教えて頂けると幸いです。今回、素人目線ながらこんなことがあったと残しておきます。誰かひとりでも、この記事が参考になれば幸いです。この記事を書いた人tanatiyo記事一覧ウェブサイト古い投稿Swiperの実装で参考にした動画・サイト新しい投稿フォーム周辺(jQuery実装)の完成~Googleフォーム...関連記事UncategorizedVSCodeで閉じタグの後ろにクラス名をコメントで自動追加するVSCoeでコードを書いていくときに、divタグをたくさん使うと、どこからどこまでが何の範囲か分からなくなりますよね。[...]2022年3月29日UncategorizedUncategorizedProgateのHTML&CSS中級編道場レッスン終了なんとか、中級編の道場レッスンを終了しました。途中いろいろ正常に操作しなかったりして、「なんで?」と頭をひねることが多かったです。合格がもらえるまで、初級編の倍くらいの時間がかかってしまいました。[...]2022年2月4日UncategorizedUncategorizedちづみさんの「コーディングの練習をしよう~その2~」実践中!5日目!今日で完成させたかったんですが、日付超えてしまいそうなので、先にブログに作業メモを残しておこうと思います。ここまで、トータルで17時間くらいです。