なんでも日記帳

学習したことの記録とか

jQueryでステップフォームの作成

経緯

プラグインを使っても良かったが、JavaScriptをほとんど理解せずにプラグインを使ってしまうと、保守や改善で困るので、一旦自分で書いてみようと思ったから。

コード

htmlファイル

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQueryStepForm</title>
</head>
<body>
    <div class="nav">
        <ul>
            <li class="step_nav">
                <strong>Step1</strong>
            </li>
            <li class="step_nav">
                <strong>Step2</strong>
            </li>
            <li class="step_nav">
                <strong>Step3</strong>
            </li>
        </ul>
    </div>
    <br>
    <hr>

    <form action="">
        <span class="step">
            <label for="">Name</label>
            <input type="text">
            <br>
            <label for="">Sex</label>
            <input type="radio" name="sex" value="1">Male
            <input type="radio" name="sex" value="2">Female
            <input type="radio" name="sex" value="3">Other
        </span>
        <span class="step">
            <label for="">Email</label>
            <input type="email">
            <br>
            <label for="">Password</label>
            <input type="password">
            <br>
            <label for="">Phone_Number</label>
            <input type="tel">
        </span>
        <span class="step">
            <label for="">Other</label>
            <textarea name="" id="" cols="50" rows="5"></textarea>
        </span>

        <hr>
        <span class="next"><button type="button">Next</button></span>
        <span class="back"><button type="button">Back</button></span>
        <div class="submit"><button type="submit">Submit</button></div> 
    </form>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="./step_form.js"></script>
</body>
</html>

JavaScriptファイル

$(function(){

    var step_nav = $('.step_nav');

    step_nav.css('list-style', 'none');
    step_nav.css('float', 'left');
    step_nav.css('padding-right', '40px');
    step_nav.eq(0).css('color', '#ff0000');

    var step = $('.step');
    step.eq(1).hide();
    step.eq(2).hide();

    var current_step_count = 0;

    $('.back').hide();
    $('.submit').hide();

    $('.next').on('click', function(){
        current_step_count += 1;
        step.eq(current_step_count).fadeIn();
        step.eq(current_step_count -1 ).hide();

        console.log(current_step_count);
        step_nav.eq(current_step_count).css('color', '#ff0000');

        if (current_step_count == step.length -1) {
            $('.next').hide();
        } else {
            $('.next').show();
        }

        if (current_step_count <= 1) {
            $('.back').show();
        }

        if (current_step_count == step.length - 1) {
            $('.submit').show();
        }
    })

    $('.back').on('click', function(){
        current_step_count -= 1;
        step.eq(current_step_count).fadeIn();
        step.eq(current_step_count + 1 ).hide();

        step_nav.eq(current_step_count + 1 ).css('color', '#000000');

        if (current_step_count < step.length) {
            $('.next').show();
        }

        if (current_step_count == 0) {
            $('.back').hide();
        }

        if (current_step_count < step.length) {
            $('.submit').hide();
        }
    })
})

解説?

フォームとSTEP番号にそれぞれstepとstep_navという名前をつけて、ボタンが押されるたびにhide()とshow()を切り替えているだけ。 もっといいやり方はあるはず。

詰まったところ

「次へ」「戻る」ボタンを押すたびsubmitされる現象に悩んだ。 ボタンはデフォルトでtype="submit"となっているので、type="button"を設定して解決。

html5.cyberlab.info

github.com