進捗バー付きの段階的なフォーム

はじめに

このプロジェクトでは、jQuery を使って進捗バー付きの段階的なフォームを実装する方法を学びます。このプロジェクトは、ユーザーが簡単に異なるステップをナビゲートできるダイナミックでインタラクティブなフォームを作成するプロセスを理解するのに役立ちます。

👀 プレビュー

段階的なフォームのデモ

🎯 タスク

このプロジェクトでは、以下を学びます。

フォームの次のステップに切り替える「次のページ」ボタンの機能を実装する方法。
フォームの前のステップに切り替える「前へ」ボタンの機能を実装する方法。
成功メッセージを表示する「送信」ボタンの機能を実装する方法。
フォームの現在のステップを反映するように進捗バーを更新する方法。

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

jQuery を使って DOM を操作し、ユーザーインタラクションを処理する。
display プロパティを使ってフォームフィールドの表示を制御する。
フォームの現在のステップを反映するように進捗バーを更新する。
クリーンで直感的なユーザーインターフェイスを備えた段階的なフォームを作成する。

プロジェクト構造を設定する

このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了してください。

プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。

├── css
│   └── style.css
├── js
│   ├── index.js
│   └── jquery-3.6.0.min.js
└── index.html

その中で：

css/style.css はスタイルファイルです。
js/index.js は段階的なフォームの切り替えを実装するための JavaScript ファイルです。
js/jquery-3.6.0.min.js は jQuery ファイルです。
index.html はメインページです。

WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部にある「Web 8080」を開き、手動で更新してページを表示します。

次のページのボタンを実装する

このステップでは、フォームの最初のステップにある「次へ」ボタンの機能をどのように実装するかを学びます。

js/index.js ファイルを開きます。
$(".next").click のコードを探して、以下のコードを追加します。

// 次のページのボタンをクリックする
$(".next").click(function () {
  current_form = $(this).parent();
  next_form = current_form.next();
  // 次のフォームを表示し、他のフォームを非表示にする
  next_form.show().siblings("fieldset").hide();
  const index = next_form.index() - 1;
  $("#progressbar li").eq(index).addClass("active");
});

このコードは「次のページ」ボタンのクリックイベントを処理するためのものです。それが何をするか分解してみましょう。
- $(".next").click(function () {... })：クラス名が "next" の要素に対するクリックイベントハンドラを設定します。
- current_form = $(this).parent();：クリックされた「次のページ」ボタンを含む現在のフォームフィールドを取得します。
- next_form = current_form.next();：「次のページ」ボタンをクリックした後に表示されるはずの次のフォームフィールドを取得します。
- next_form.show().siblings("fieldset").hide();：次のフォームフィールドを表示し、他のすべてのフォームフィールド（次のフォームフィールドの兄弟要素）を非表示にします。
- const index = next_form.index() - 1;：次のフォームフィールドのインデックスを計算します。これは進捗バーを更新するために使用されます。
- $("#progressbar li").eq(index).addClass("active");：対応する進捗バーの項目に "active" クラスを追加します。これはユーザーが次のステップに移動したことを示します。

前のボタンを実装する

このステップでは、フォームの 2 番目のステップにある「前へ」ボタンの機能をどのように実装するかを学びます。

js/index.js ファイルの中で、$(".previous").click のコードを探して、以下のコードを追加します。

// 戻るボタンをクリックする
$(".previous").click(function () {
  current_form = $(this).parent();
  previous_form = current_form.prev();
  previous_form.show().siblings("fieldset").hide();
  const index = previous_form.index() - 1;
  $("#progressbar li")
    .eq(index)
    .addClass("active")
    .next()
    .removeClass("active");
});

このコードは「前へ」ボタンのクリックイベントを処理するためのものです。それが何をするか分解してみましょう。
- $(".previous").click(function () {... })：クラス名が "previous" の要素に対するクリックイベントハンドラを設定します。
- current_form = $(this).parent();：クリックされた「前へ」ボタンを含む現在のフォームフィールドを取得します。
- previous_form = current_form.prev();：「前へ」ボタンをクリックした後に表示されるはずの前のフォームフィールドを取得します。
- previous_form.show().siblings("fieldset").hide();：前のフォームフィールドを表示し、他のすべてのフォームフィールド（前のフォームフィールドの兄弟要素）を非表示にします。
- const index = previous_form.index() - 1;：前のフォームフィールドのインデックスを計算します。これは進捗バーを更新するために使用されます。
- $("#progressbar li").eq(index).addClass("active").next().removeClass("active");：対応する進捗バーの項目に "active" クラスを追加します。これはユーザーが前のステップに移動したことを示し、次の進捗バーの項目から "active" クラスを削除します。

送信ボタンを実装する

このステップでは、フォームの 3 番目のステップにある「送信」ボタンの機能をどのように実装するかを学びます。

js/index.js ファイルの中で、$(".submit").click のコードを探して、以下のコードを追加します。

// 送信ボタンをクリックする
$(".submit").click(function () {
  alert("正常に送信されました！");
});

このコードは「送信」ボタンのクリックイベントを処理するためのものです。それが何をするか分解してみましょう。
- $(".submit").click(function () {... })：クラス名が "submit" の要素に対するクリックイベントハンドラを設定します。
- alert("正常に送信されました！");：フォームが正常に送信されたことを示すアラートメッセージをユーザーに表示します。

これらの 4 つのステップを完了すると、段階的なフォームの機能が完全に実装されるはずです。「次へ」、「前へ」、「送信」ボタンをクリックしてフォームをテストし、フォームの切り替えと進捗バーの更新が期待通りに機能していることを確認してください。最終的なページの表示は以下の通りです。

画像の説明