質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.94%

jsでformの切り替え

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,369

score 96

<!-- エリア1  -->
<div class="form-area active">
フォームの内容
<button>確認画面</button> <!--  このボタンを押すとエリア2が表示される -->
</div>

<!-- エリア2  -->
<div class="form-area">
確認画面
<button>もどる</button><!--  このボタンを押すとエリア1が表示される -->
<button>送信</button><!--  このボタンを押すとエリア3が表示される -->
</div>

<!-- エリア3  -->
<div class="form-area">
送信完了
<button>フォーム入力に戻る</button><!--  このボタンを押すとエリア1が表示される -->
</div>
$('button').click(function(){
  $(this).toggleClass('active');
});


やりたいことは
最初の画面では1つ目のフォームの内容の.form-areaが表示されていて
buttonを押したら次の確認画面.form-areaを表示、戻るを押したらフォームの内容の.form-areaが表示
送信完了の画面でbuttonをおしたら最初のフォームの内容.form-areaを表示

のようにクラス(active)を追加したり削除したりしたいのですが、上記のjsだと同時に2つform-areaが
出てしまうとおもうのですがよい方法はないでしょうか?jsはほとんど初めて触るため知識がありません。
ご教示よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • x_x

    2018/03/02 17:17

    buttonが四つ存在しているので、どれを押したらどうなるかをそれぞれ明記してもらえるでしょうか?

    キャンセル

  • MeB

    2018/03/02 17:23

    訂正致しました。

    キャンセル

回答 3

+3

.toggleClass()だけでは制御できないので、各form-areaにclassかidを振っておいて判別したらどうでしょうか?

<div class="form-area area2">
 確認画面
 <button data-next="area1">もどる</button>
 <button data-next="area3">送信</button>
</div>
<!-- 他も同様 -->
$('button').on('click', function(event) {
  $('.form-area').hide();
  $('.' + $(this).attr('data-next')).show();
});

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+3

.form-areaそれぞれにIDを振り、removeClass/addClassで切り替えるのがいいと思います。
個人的には、入力/確認/送信画面は、ページ分けた方がいいような気がしますが。

<div class="form-area active" id="formEnter">
フォームの内容
<button id="btn-confirm">確認画面</button>
</div>
<div class="form-area" id="formConfirm">
確認画面
<button id="btn-return">もどる</button><button id="btn-send">送信</button>
</div>
<div class="form-area" id="formEnd">
送信完了
<button id="btn-enter">フォーム入力に戻る</button>
</div>
$(function(){
    $('#btn-enter, #btn-return').click(function(){
        $('#formConfirm, #formEnd').removeClass('active');
        $('#formEnter').addClass('active');
    });
    $('#btn-confirm').click(function(){
        $('#formEnter, #formEnd').removeClass('active');
        $('#formConfirm').addClass('active');
    });
    $('#btn-send').click(function(){
        $('#formEnter, #formConfirm').removeClass('active');
        $('#formEnd').addClass('active');
    });
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

+2

.form-area{display:none}
.form-area.active{display:block}
$(function(){
  $('button').on('click',function(){
    switch($(this).text()){
    case "確認画面":
    case "もどる":
      $('.form-area:eq(0),.form-area:eq(1)').toggleClass("active");
      break;
    case "送信":
      $('.form-area:eq(1),.form-area:eq(2)').toggleClass("active");
      break;
    case "フォーム入力に戻る":
      $('.form-area:eq(0),.form-area:eq(2)').toggleClass("active");
      break;
    }
  });
});
<div class="form-area active">
フォームの内容
<button>確認画面</button>
</div>
<div class="form-area">
確認画面
<button>もどる</button>
<button>送信</button>
</div>
<div class="form-area">
送信完了
<button>フォーム入力に戻る</button>
</div>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/02 18:16

    いつも回答ありがとうございます。
    <button>のなかが画像の場合も同じようなことができますでしょうか?

    キャンセル

  • 2018/03/02 18:18

    imgをつかった画像であれば$(this).html()などで代替してください
    もちろんidやbuttonの出現順番(index)で処理するほうが楽だと思います

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.94%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る