135 lines
5.6 KiB
JavaScript
135 lines
5.6 KiB
JavaScript
// =============================== Wizard Step Js Start ================================
|
|
$(document).ready(function () {
|
|
// click on next button
|
|
$(".form-wizard-next-btn").on("click", function () {
|
|
var parentFieldset = $(this).parents(".wizard-fieldset");
|
|
var currentActiveStep = $(this)
|
|
.parents(".form-wizard")
|
|
.find(".form-wizard-list .active");
|
|
var next = $(this);
|
|
var nextWizardStep = true;
|
|
parentFieldset.find(".wizard-required").each(function () {
|
|
var thisValue = $(this).val();
|
|
|
|
if (thisValue == "") {
|
|
$(this).siblings(".wizard-form-error").show();
|
|
nextWizardStep = false;
|
|
} else {
|
|
$(this).siblings(".wizard-form-error").hide();
|
|
}
|
|
});
|
|
if (nextWizardStep) {
|
|
next.parents(".wizard-fieldset").removeClass("show", "400");
|
|
currentActiveStep
|
|
.removeClass("active")
|
|
.addClass("activated")
|
|
.next()
|
|
.addClass("active", "400");
|
|
next.parents(".wizard-fieldset")
|
|
.next(".wizard-fieldset")
|
|
.addClass("show", "400");
|
|
$(document)
|
|
.find(".wizard-fieldset")
|
|
.each(function () {
|
|
if ($(this).hasClass("show")) {
|
|
var formAtrr = $(this).attr("data-tab-content");
|
|
$(document)
|
|
.find(".form-wizard-list .form-wizard-step-item")
|
|
.each(function () {
|
|
if ($(this).attr("data-attr") == formAtrr) {
|
|
$(this).addClass("active");
|
|
var innerWidth = $(this).innerWidth();
|
|
var position = $(this).position();
|
|
$(document)
|
|
.find(".form-wizard-step-move")
|
|
.css({
|
|
left: position.left,
|
|
width: innerWidth,
|
|
});
|
|
} else {
|
|
$(this).removeClass("active");
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
//click on previous button
|
|
$(".form-wizard-previous-btn").on("click", function () {
|
|
var counter = parseInt($(".wizard-counter").text());
|
|
var prev = $(this);
|
|
var currentActiveStep = $(this)
|
|
.parents(".form-wizard")
|
|
.find(".form-wizard-list .active");
|
|
prev.parents(".wizard-fieldset").removeClass("show", "400");
|
|
prev.parents(".wizard-fieldset")
|
|
.prev(".wizard-fieldset")
|
|
.addClass("show", "400");
|
|
currentActiveStep
|
|
.removeClass("active")
|
|
.prev()
|
|
.removeClass("activated")
|
|
.addClass("active", "400");
|
|
$(document)
|
|
.find(".wizard-fieldset")
|
|
.each(function () {
|
|
if ($(this).hasClass("show")) {
|
|
var formAtrr = $(this).attr("data-tab-content");
|
|
$(document)
|
|
.find(".form-wizard-list .form-wizard-step-item")
|
|
.each(function () {
|
|
if ($(this).attr("data-attr") == formAtrr) {
|
|
$(this).addClass("active");
|
|
var innerWidth = $(this).innerWidth();
|
|
var position = $(this).position();
|
|
$(document)
|
|
.find(".form-wizard-step-move")
|
|
.css({
|
|
left: position.left,
|
|
width: innerWidth,
|
|
});
|
|
} else {
|
|
$(this).removeClass("active");
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
//click on form submit button
|
|
$(document).on("click", ".form-wizard .form-wizard-submit", function () {
|
|
var parentFieldset = $(this).parents(".wizard-fieldset");
|
|
var currentActiveStep = $(this)
|
|
.parents(".form-wizard")
|
|
.find(".form-wizard-list .active");
|
|
parentFieldset.find(".wizard-required").each(function () {
|
|
var thisValue = $(this).val();
|
|
if (thisValue == "") {
|
|
$(this).siblings(".wizard-form-error").show();
|
|
} else {
|
|
$(this).siblings(".wizard-form-error").hide();
|
|
}
|
|
});
|
|
});
|
|
// focus on input field check empty or not
|
|
$(".form-control")
|
|
.on("focus", function () {
|
|
var tmpThis = $(this).val();
|
|
if (tmpThis == "") {
|
|
$(this).parent().addClass("focus-input");
|
|
} else if (tmpThis != "") {
|
|
$(this).parent().addClass("focus-input");
|
|
}
|
|
})
|
|
.on("blur", function () {
|
|
var tmpThis = $(this).val();
|
|
if (tmpThis == "") {
|
|
$(this).parent().removeClass("focus-input");
|
|
$(this).siblings(".wizard-form-error").show();
|
|
} else if (tmpThis != "") {
|
|
$(this).parent().addClass("focus-input");
|
|
$(this).siblings(".wizard-form-error").hide();
|
|
}
|
|
});
|
|
});
|
|
// =============================== Wizard Step Js End ================================
|