'How to make the prev button remove activity from progress
How can I make the prev button remove activity from progress:
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
function showTab(n) {
// This function will display the specified tab of the form...
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
//... and fix the Previous/Next buttons:
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == (x.length - 1)) {
document.getElementById("nextBtn").innerHTML = "Submit";
} else {
document.getElementById("nextBtn").innerHTML = "Continue";
}
//... and run a function that will display the correct step indicator:
fixStepIndicator(n)
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) return false;
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form...
if (currentTab >= x.length) {
// ... the form gets submitted:
document.getElementById("regForm").submit();
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}
function removeElementsByClass(className) {
const elements = document.getElementsByClassName(className);
while (elements.length > 0) {
elements[0].parentNode.removeChild(elements[0]);
}
}
function validateForm() {
removeElementsByClass("validation-message");
// This function deals with validation of the form fields
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
// y = x[currentTab].getElementsByTagName("input");
y = x[currentTab].getElementsByClassName("required");
// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i++) {
// If a field is empty...
if (y[i].value == "") {
// add an "invalid" class to the field:
y[i].className += " invalid";
// and set the current valid status to false
valid = false;
if (y[i].classList.contains("signature")) {
alert("You should add you signature then click the button 'Add signature'")
}
}
}
//Validate Password
var passwordField = x[currentTab].getElementsByClassName("passwordfield");
if (passwordField.length) {
if (passwordField[0].value.length < 8) {
passwordField[0].className += " invalid";
passwordField[0].insertAdjacentHTML('afterend', '<span class="validation-message">Use 8 or more characters for your password.</span>');
valid = false;
}
if (passwordField[0].value.length > 50) {
passwordField[0].className += " invalid";
passwordField[0].insertAdjacentHTML('afterend', '<span class="validation-message">Use less than 50 characters for your password.</span>');
valid = false;
}
if (passwordField[0].value != passwordField[1].value) {
passwordField[1].className += " invalid";
passwordField[1].insertAdjacentHTML('afterend', '<span class="validation-message">The two passwords entered do not match. Please try again.</span>');
valid = false;
}
}
//Validate Password
var all_alphanumric = x[currentTab].getElementsByClassName("alphanumric");
if (all_alphanumric.length) {
// var letterNumber = /^[0-9a-zA-Z]+$/;
var letterNumber = /^[a-z\d\-_\s]+$/i;
for (j = 0; j < all_alphanumric.length; j++) {
if (all_alphanumric[j].value.length && !(all_alphanumric[j].value.match(letterNumber))) {
all_alphanumric[j].className += " invalid";
all_alphanumric[j].insertAdjacentHTML('afterend', '<span class="validation-message">Sorry, but only letters (Aa-Zz) and numbers (0-9) are allowed.</span>');
valid = false;
}
}
}
//Validate Mobile
var all_mobiles = x[currentTab].getElementsByClassName("mobile_number");
if (all_mobiles.length) {
var letterNumber = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im;
for (k = 0; k < all_mobiles.length; k++) {
if (all_mobiles[k].value.length && !(all_mobiles[k].value.match(letterNumber))) {
all_mobiles[k].className += " invalid";
all_mobiles[k].insertAdjacentHTML('afterend', '<span class="validation-message">Please use a valid mobile number.</span>');
valid = false;
}
}
}
//Validate Email
var all_mails = x[currentTab].getElementsByClassName("email_address");
if (all_mails.length) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
for (s = 0; s < all_mails.length; s++) {
if (all_mails[s].value.length && !(re.test(all_mails[s].value))) {
all_mails[s].className += " invalid";
all_mails[s].insertAdjacentHTML('afterend', '<span class="validation-message">Please use a valid email adress.</span>');
valid = false;
}
}
}
// If the valid status is true, mark the step as finished and valid:
if (valid) {
document.getElementsByClassName("progtrckr-todo")[currentTab].className += " progtrckr-done";
}
return valid; // return the valid status
}
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i, x = document.getElementsByClassName("progtrckr-todo");
for (i = 0; i < x.length; i++) {
x[i].className = x[i].className.replace(" active", "");
}
//... and adds the "active" class on the current step:
x[n].className += " active";
}/* Start CSS FOR Multi Steps */
.multiSteps {
margin: 90px 0;
}
.filter-multi {
display: flex;
width: 339px;
height: 57px;
margin: auto;
outline: 1px solid #707070;
border-radius: 42px;
overflow: hidden;
}
.filter-multi div {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
cursor: pointer;
}
.filter-multi div h2 {
color: #393C41;
font-size: 21px;
font-family: "HelveticaNeue-bold";
letter-spacing: -1.16px;
}
.filter-multi .frist h2 {
color: #fff;
}
.filter-multi .frist {
background: #27BA5A;
border-radius: 0 42px 42px 0;
}
/* Style the form */
#regForm {
background-color: #ffffff;
margin-top: 120px;
margin-left: auto;
width: 70%;
min-width: 300px;
}
/* Mark input boxes that gets an error on validation: */
#regForm input.invalid {
background-color: #ffdddd;
}
/* Hide all steps by default: */
#regForm .tab {
display: none;
}
/* Make circles that indicate the steps of the form: */
#regForm .step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}
/* Mark the active step: */
#regForm .step.active {
opacity: 1;
}
/* Mark the steps that are finished and valid: */
#regForm .step.finish {
background-color: #27BA5A;
border-radius: 3px;
}
#regForm button {
background-color: #27BA5A;
color: #ffffff;
border: none;
padding: 10px 20px;
font-size: 17px;
border-radius: 3px;
cursor: pointer;
height: 41px;
width: 156px;
margin-top: 30px;
}
#regForm #prevBtn {
background-color: #bbbbbb;
}
/* Progress Tracker v2 */
ol.progtrckr {
margin: 0;
padding: 0;
list-style-type: none;
}
ol.progtrckr li {
display: inline-block;
text-align: center;
line-height: 3em;
}
ol.progtrckr[data-progtrckr-steps="2"] li {
width: 49%;
}
ol.progtrckr[data-progtrckr-steps="3"] li {
width: 33%;
}
ol.progtrckr[data-progtrckr-steps="4"] li {
width: 24%;
}
ol.progtrckr[data-progtrckr-steps="5"] li {
width: 19%;
}
ol.progtrckr li.progtrckr-todo {
color: silver;
border-bottom: 11px solid #27BA5A;
opacity: 1;
}
ol.progtrckr li.progtrckr-done {
color: black;
border-bottom: 11px solid #27BA5A;
opacity: 1 !important;
}
ol.progtrckr li:after {
content: "\00a0\00a0";
}
ol.progtrckr li:before {
position: relative;
font-size: 40px;
font-family: "HelveticaNeue-bold";
left: 50%;
transform: translate(-50%, 50%);
height: 75px;
width: 75px;
}
ol.progtrckr li.progtrckr-todo:before {
content: "1";
height: 75px;
width: 75px;
line-height: 1.2em;
border: none;
border-radius: 50%;
bottom: -35px;
left: 35%;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
font-family: "HelveticaNeue-bold";
color: #27BA5A;
background-color: white;
border: 3px solid #27BA5A;
}
ol.progtrckr li.progtrckr-todo:nth-child(1):before {
content: "1";
}
ol.progtrckr li.progtrckr-todo:nth-child(2):before {
content: "2";
}
ol.progtrckr li.progtrckr-todo:nth-child(3):before {
content: "3";
}
ol.progtrckr li.progtrckr-todo:nth-child(4):before {
content: "4";
}
ol.progtrckr li.progtrckr-todo:nth-child(5):before {
content: "5";
}
ol.progtrckr li.progtrckr-done:before {
content: "\2713";
color: white;
background-color: #27BA5A;
height: 75px;
width: 75px;
line-height: 1.2em;
border: none;
border-radius: 50%;
bottom: -35px;
left: 35%;
transform: translate(-50%, 50%);
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
font-family: "HelveticaNeue-bold";
}
ol.progtrckr {
display: table;
list-style-type: none;
margin: 0;
padding: 0;
table-layout: fixed;
width: 100%;
}
ol.progtrckr li {
display: table-cell;
text-align: center;
line-height: 2.9;
font-size: 12px;
font-weight: 700;
}
ol.progtrckr li.active {
opacity: 1 !important;
}
.bolts-step {
display: none;
}
/* Mark the active step: */
.step.active {
opacity: 1;
}
.progtrckr span {
font-size: 18px;
display: block;
width: 166px;
line-height: 1;
text-align: center;
position: absolute;
left: 125px;
bottom: -35px;
color: #393C41;
font-family: "HelveticaNeue-bold";
width: max-content;
}
.progtrckr li {
position: relative;
}
ol.progtrckr li.progtrckr-done:nth-child(1):before {
content: "1";
}
ol.progtrckr li.progtrckr-done:nth-child(2):before {
content: "2";
}
ol.progtrckr li.progtrckr-done:nth-child(3):before {
content: "3";
}
ol.progtrckr li.progtrckr-done:nth-child(4):before {
content: "4";
}
ol.progtrckr li.progtrckr-done:nth-child(5):before {
content: "5";
}
.multiSteps .title-regform {
font-size: 36px;
font-family: "HelveticaNeue-bold";
letter-spacing: -1.98px;
color: #393C41;
margin-bottom: 50px;
}
.multiSteps .grid-towCloman {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 45px;
margin-bottom: 30px;
}
#regForm .form-erea label {
font-size: 12px;
font-family: "HelveticaNeue-R";
letter-spacing: 0px;
color: #393C41;
margin-bottom: 7px;
display: block;
}
#regForm .form-erea ::placeholder {
font-size: 12px;
font-family: "HelveticaNeue-R";
color: #393C41;
}
#regForm .form-erea textarea,
#regForm .form-erea select,
#regForm .form-erea input {
padding: 10px 15px;
width: 100%;
border: 1px solid #D8D9D9;
height: 41px;
}
#regForm .form-erea textarea {
height: 133px;
}
#regForm .grid-diffCloman {
display: grid;
grid-template-columns: 8% 87%;
grid-gap: 41px;
margin-bottom: 30px;
}
#regForm .grid-diffCloman .form-erea select {
text-align: center;
}
#regForm .form-erea select {
-webkit-appearance: none;
-moz-appearance: none;
background: transparent;
background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
background-repeat: no-repeat;
background-position-x: 98%;
background-position-y: 7px;
}
.grid-fourCloman {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 26px;
margin-bottom: 30px;
}
.checkbox-form {
display: flex;
align-items: center;
}
.checkbox-form label {
margin-left: 15px;
}
/* END CSS FOR Multi Steps */<!DOCTYPE html>
<html>
<head>
<title>Book Now</title>
<meta charset="utf-8">
</head>
<body>
<!-- Start Multi Steps-->
<section class="multiSteps">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="filter-multi">
<div class="frist">
<h2>Australia</h2>
</div>
<div class="second">
<h2>International</h2>
</div>
</div>
</div>
<div class="col-md-12">
<div class="progreess-multi-step">
<div class="ling-green"></div>
<ol class="progtrckr progress" data-progtrckr-steps="9">
<li class="step progtrckr-todo ">
<span>Shipment details</span>
</li>
<li class=" step progtrckr-todo ">
<span>Quote</span>
</li>
<li class=" step progtrckr-todo">
<span>Address</span>
</li>
<li class="step progtrckr-todo">
<span>Summary</span>
</li>
<li class="step progtrckr-todo">
<span>Payment</span>
</li>
</ol>
</div>
<form id="regForm" action="">
<!-- One "tab" for each step in the form: -->
<div class="tab" style="display: block;">
<h2 class="title-regform">01 Shipment details</h2>
<div class="grid-towCloman">
<div class="form-erea">
<label for=" ">Pick-up Date</label>
<input placeholder="Pick-up Date" oninput="this.className = ''">
</div>
<div class="form-erea">
<label for="">Pick-up Time</label>
<input placeholder="12:00pm" oninput="this.className = ''">
</div>
</div>
<div class="grid-towCloman">
<div class="form-erea">
<label for="">Service Type</label>
<select name="" id="">
<option value="Express">Express</option>
<option value="Express">Express</option>
</select>
</div>
<div class="form-erea">
</div>
</div>
<div class="grid-diffCloman">
<div class="form-erea">
<label for="">Quantity</label>
<select name="" id="">
<option value="01">01</option>
<option value="02">02</option>
</select>
</div>
<div class="form-erea">
<label for="">Description</label>
<textarea name="" id="" rows="10" placeholder="Description"></textarea>
</div>
</div>
<div class="grid-fourCloman">
<div class="form-erea">
<label for=" ">Weight</label>
<input placeholder="Weight (KG)" oninput="this.className = ''">
</div>
<div class="form-erea">
<label for="">Width</label>
<input placeholder="Width (MM)" oninput="this.className = ''">
</div>
<div class="form-erea">
<label for=" ">Length</label>
<input placeholder="Length (MM)" oninput="this.className = ''">
</div>
<div class="form-erea">
<label for="">Height</label>
<input placeholder="Height (MM)" oninput="this.className = ''">
</div>
</div>
<div class="grid-oneCloman">
<div class="checkbox-form">
<input type="checkbox">
<label for="">Save this information for next time</label>
</div>
</div>
</div>
<div class="tab">
<h2 class="title-regform">02 Destination </h2>
</div>
<div class="tab">
<h2 class="title-regform"> </h2>
<div class="form-erea"><input placeholder="dd" oninput="this.className = ''"></div>
<div class="form-erea"><input placeholder="mm" oninput="this.className = ''"></div>
<div class="form-erea"><input placeholder="yyyy" oninput="this.className = ''"></div>
</div>
<div class="tab">
<h2 class="title-regform"> </h2>
<div class="form-erea"><input placeholder="Username..." oninput="this.className = ''"></div>
<div class="form-erea"><input placeholder="Password..." oninput="this.className = ''"></div>
</div>
<div style="overflow:auto;">
<div style="">
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</body>
</html>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|