xxxxxxxxxx
1
<ul class="stepper" id="stepper" data-mdb-stepper="stepper" data-mdb-stepper-linear="true" data-mdb-stepper-type="vertical">
2
<form class="needs-validation stepper-form" novalidate>
3
4
<li class="stepper-step stepper-active">
5
<div class="stepper-head">
6
<span class="stepper-head-icon"> 1 </span>
7
<span class="stepper-head-text"> Customer Details</span>
8
</div>
9
<div class="stepper-content py-3">
10
<div class="form-group">
11
<label for="address">Address<span class="text-danger">*</span> </label>
12
<input type="text" class="form-control" name="address" id="address" required>
13
<div class="invalid-feedback">Required</div>
14
</div>
15
16
<button id="step-2" class="btn btn-primary next-step">next</button>
17
</div>
18
</li>
19
<li class="stepper-step">
20
<div class="stepper-head">
21
<span class="stepper-head-icon"> 2 </span>
22
<span class="stepper-head-text"> Product Details </span>
23
</div>
24
<div class="stepper-content py-3">
25
<div class="row mt-3">
26
<div class="col-12">
27
<div class="form-group">
28
<label for="powerunit">Power Unit Model #<span class="text-danger">*</span> </label>
29
<input type="text" class="form-control" name="powerunitmodel" id="powerunitmodel" placeholder="Choose Power Unit from Dropdown" required>
30
<div class="invalid-feedback">Required</div>
31
</div>
32
</div>
33
34
</div>
35
36
<button id="step-3" class="btn btn-primary next-step">next</button>
37
</div>
38
</li>
39
</form>
40
</ul>
1
1
xxxxxxxxxx
1
const stepper = new mdb.Stepper(document.getElementById('stepper'));
2
3
var nexts = document.getElementsByClassName('next-step');
4
5
6
for (i = 0; i < nexts.length; i++) {
7
nexts[i].addEventListener('click', () => {
8
stepper.nextStep();
9
});
10
}
11
Console errors: 0