必須項目を選択すると自動(強制)的に遷移する動きを、JavaScriptで実現できるのか


お世話になります。以下のサンプルページのように、
https://kango-oshigoto.jp/lp/027aq/00/99/00/

必須項目を選択すると、自動的に(ページ内で)次のStepに行くような処理を実現したいと考えています。
エンジニアの判断では、サーバーとの通信が必要だということなのですが、JavaScriptなどでは実現できないものでしょうか。

もし可能な場合、参考になるサイト、またはサンプルコードなどをご教示いただけませんでしょうか。
何卒よろしくお願いいたします。

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:
  • 終了:2019/12/17 09:30:06

ベストアンサー

id:a-kuma3 No.1

回答回数4929ベストアンサー獲得回数2133

ポイント1000pt

jsFiddle にサンプルを置きました。
http://jsfiddle.net/a_kuma3/syc5xtha/embedded/result,js,html,css/

質問の文面からは、つまづきポイントがよく分からないので、勝手に想像して書くと、ポイントはふたつあると思います。


まず、タブ表示。
見た目は遷移しているわけですけれど、実際には全てのタブの HTML が展開されていて、そのうちのひとつだけを表示している、というふうになってます。


もうひとつは、条件を満たしたら、ってところでしょうか。
ラジオボタンやプルダウンリストボックスをクリックしたときのイベントは、デフォルトで上位のタグにも伝搬します。
その上位の要素の onclick イベントのハンドラで、クリックされた要素を調べて、内容が設定されたかどうかを保持しておきます。
クリックされるたびに、全体の内容が指定された要素の状態を調べて、表示すべきタブがどれか、という判定をして、そのタブを表示する、というような流れです。

id:cafe-beret

返信が遅れまして大変失礼しました。
タブを使っていたとは盲点でした…。条件に関してもイメージに近いものでした。
サンプルコードまで書いていただき、誠にありがとうございます。実装に際し参考にさせていただきます。

2019/12/17 17:00:12

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません