mardi 10 août 2021

Javascript and html stepper

Please i need help, i am creating dynamic stepper registration form, here is the error am facing. my dom switch to the last one created dynamically which is wrong. What i want to achive is, i want to have add one more step base on type of user choosen on the dropdown (accountType) here is my code below

@push('style')
    <style>
        .stepwizard-step p {
            margin-top: 10px;
        }

        .stepwizard-row {
            display: table-row;
        }

        .stepwizard {
            display: table;
            width: 100%;
            position: relative;
        }

        .stepwizard-step button[disabled] {
            opacity: 1 !important;
            filter: alpha(opacity=100) !important;
        }

        .stepwizard-row:before {
            top: 14px;
            bottom: 0;
            position: absolute;
            content: " ";
            width: 100%;
            height: 1px;
            background-color: #ccc;
            z-order: 0;
        }

        .stepwizard-step {
            display: table-cell;
            text-align: center;
            position: relative;
        }

        .btn-circle {
            width: 30px;
            height: 30px;
            text-align: center;
            padding: 6px 0;
            font-size: 12px;
            line-height: 1.428571429;
            border-radius: 15px;
        }
    </style>
@endpush
@push('scripts')
    <script>
        $(document).ready(function () {



            $.each([1, 2], function (index, value) {
                $("div.setup-panel").append(
                    '<div class="stepwizard-step">\n' +
                    '<a href="#step-'+value+'" type="button" class="btn btn-primary btn-circle">'+value+'</a>\n' +
                    '<p>Step '+value+'</p>\n' +
                    '</div>');
            });

            let navListItems = $('div.setup-panel div a'),
                allWells = $('.setup-content'),
                allNextBtn = $('.nextBtn'),

               /* adminForm = $("#adminForm"),
                memberForm = $("#memberForm"),
                nonMemberForm = $("#nonMemberForm"),*/

                allPrevBtn = $('.prevBtn');
                allWells.hide();


            navListItems.click(function (e) {
                e.preventDefault();
                let $target = $($(this).attr('href')),
                    $item = $(this);
                if (!$item.hasClass('disabled')){
                    navListItems.removeClass('btn-primary').addClass('btn-default');
                    $item.addClass('btn-primary');
                    // hide all steps
                    allWells.hide();
                    // show step
                    $target.show();
                    $target.find('input:eq(0)').focus();
                }
            });

            allNextBtn.click(function(){
                let curStep = $(this).closest(".setup-content"),
                    curStepBtn = curStep.attr("id"),

                    nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),

                    curInputs = curStep.find("input[type='text']," +
                        "input[type='email']," +
                        "input[type='password']," +
                        "input[type='checkbox'], select"
                    ),
                    isValid = true;


              /* switch ($('#accountType')[0].value){
                   case 'admin':
                       memberForm.addClass("d-none");
                       nonMemberForm.addClass("d-none");
                       adminForm.removeClass("d-none");
                       break;
                   case 'member':
                       adminForm.addClass("d-none");
                       nonMemberForm.addClass("d-none");
                       memberForm.removeClass("d-none");
                       break;
                   case 'nonmember':
                       adminForm.addClass("d-none");
                       memberForm.addClass("d-none");
                       nonMemberForm.removeClass("d-none");
                       break;
               }*/

                $(".form-group").removeClass("invalid-feedback");

                //loop through step inputs
                for(let i=0; i<curInputs.length; i++){
                    // alert(i);
                    if (!curInputs[i].validity.valid){
                        isValid = false;
                        $(curInputs[i]).closest(".form-group").addClass("invalid-feedback");
                    }
                }
                // End of loop

                if (isValid)
                    nextStepWizard.removeAttr('disabled').trigger('click');
            });

            allPrevBtn.click(function(){
                let curStep = $(this).closest(".setup-content"),
                    curStepBtn = curStep.attr("id"),
                    prevStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a");

                $(".form-group").removeClass("has-error");
                prevStepWizard.removeAttr('disabled').trigger('click');
            });

            $('div.setup-panel div a.btn-primary').trigger('click');
            $('div.setup-panel div').trigger('click');
        });
    </script>
@endpush
@extends('layout.app')
@section('content')
<div id="page-container" class="main-content-boxed">

<!-- Main Container -->
        <main id="main-container">
    <!-- Page Content -->
            <div class="bg-image" style="background-image: url('');">
    </div>

    <div class="row mx-0 bg-earth-op">
                    <div class="hero-static col-md-6 col-xl-8 d-none d-md-flex align-items-md-end">
                        <div class="p-30 invisible" data-toggle="appear">
                            <p class="font-size-h3 font-w600 text-white mb-5">
                                We're very happy you are joining our community!
                            </p>
                            <p class="font-size-h5 text-white">
                                <i class="fa fa-angles-right"></i> Create your account today and receive 50% off.
                            </p>
                            <p class="font-italic text-white-op">
                                Copyright &copy; <span class="js-year-copy"></span>
                            </p>
                        </div>
                    </div>
                    <div class="hero-static col-md-6 col-xl-4 d-flex align-items-center bg-white">
                        <div class="content content-full">
                            <!-- Header -->
                            <div class="px-30 py-10">
                                <a class="link-effect font-w700" href="index.html">
                                    <i class="si si-fire"></i>
                                    <span class="font-size-xl text-primary-dark">code</span><span class="font-size-xl">base</span>
                                </a>
                                <h1 class="h3 font-w700 mt-30 mb-10">Create New Account</h1>
                                <h2 class="h5 font-w400 text-muted mb-0">Please add your details</h2>
                            </div>
                            <!-- END Header -->

                            <!-- Sign Up Form -->
                            <!-- jQuery Validation functionality is initialized with .js-validation-signup class in js/pages/op_auth_signup.min.js which was auto compiled from _js/pages/op_auth_signup.js -->
                            <!-- For more examples you can check out https://github.com/jzaefferer/jquery-validation -->
                            <form class="js-validation-signup px-30" action="" method="post">

                                    <div class="stepwizard">
                                        <div class="stepwizard-row setup-panel"></div>
                                    </div>

                                <!-- Step 1. Registration -->
                                <div class="setup-content" id="step-1">
                                    <div class="form-group row">
                                        <div class="col-12">
                                            <div class="form-material floating">
                                                <input type="text" class="form-control" id="fName" name="fName">
                                                <label for="fName">First Name</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-12">
                                            <div class="form-material floating">
                                                <input type="text" class="form-control" id="signup-username" name="lName">
                                                <label for="lName">Last Name</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-12">
                                            <div class="form-material floating">
                                                <input type="email" class="form-control" id="email" name="email">
                                                <label for="email">Email</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-12">
                                            <div class="form-material floating">
                                                <input type="password" class="form-control" id="password" name="password">
                                                <label for="password">Password</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-12">
                                            <div class="form-material floating">
                                                <input type="password" class="form-control" id="password-confirm" name="password-confirm">
                                                <label for="password-confirm">Password Confirmation</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                            <div class="col-12">
                                                <div class="form-material floating">
                                                    <select name="accountType" id="accountType" class="form-control">
                                                        <option value="">Choose Your Account Type:</option>
                                                        <option value="admin">Admin</option>
                                                        <option value="member">Member</option>
                                                        <option value="nonmember">Non-Member</option>
                                                    </select>
                                                </div>
                                            </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-12">
                                            <div class="form-material floating">
                                                <select name="gender" id="gender" class="form-control">
                                                    <option value="">Gender</option>
                                                    <option value="">Male</option>
                                                    <option value="">Female</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-12">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="signup-terms" name="signup-terms">
                                                <label class="custom-control-label" for="signup-terms">I agree to Terms &amp; Conditions</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <a class="btn btn-sm btn-hero btn-alt-success nextBtn btn-lg pull-right">
                                            <i class="fa fa-plus mr-10"></i> Next
                                        </a>
                                        <div class="mt-30">
                                            <a class="link-effect text-muted mr-10 mb-5 d-inline-block" href="#" data-toggle="modal" data-target="#modal-terms">
                                                <i class="fa fa-book text-muted mr-5"></i> Read Terms
                                            </a>
                                            <a class="link-effect text-muted mr-10 mb-5 d-inline-block" href="">
                                                <i class="fa fa-user text-muted mr-5"></i> Sign In
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="setup-content" id="step-2">
                                    Hello
                                </div>


                            </form>
                            <!-- END Sign Up Form -->
                        </div>
                    </div>
                </div>
            <!-- END Page Content -->

        </div>

</div>
@endsection

best aproched and great help will be welocme



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire