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 © <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 & 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
from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/3fOh2z1
via IFTTT
تعليقات
إرسال تعليق