如何解决形成多步javascript和bootstrap
我将组件步进器用于我正在研究的多步表单,但我的错误很可能是由于代码编译错误造成的。
在示例中,您可以看到一切正常,直到传递到第三步的那一刻,即当您单击下一步按钮时,表单返回到起点,并没有前进到第三步。
非常感谢
const stepper = new mdb.Stepper(document.getElementById('stepper-form-example'));
document.getElementById('next-step').addEventListener('click',() => {
stepper.nextStep();
});
document.getElementById('prev-step').addEventListener('click',() => {
stepper.prevIoUsstep();
});
document.getElementById('next-step2').addEventListener('click',() => {
stepper.nextStep(2);
});
document.getElementById('prev-step2').addEventListener('click',() => {
stepper.prevIoUsstep();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.css" rel="stylesheet"/>
<ul class="stepper" id="stepper-form-example" data-mdb-stepper-linear="true">
<form class="needs-validation stepper-form">
<!-- primo step -->
<li id="step-uno" class="stepper-step stepper-active">
<div class="stepper-head">
<span class="stepper-head-icon"> 1 </span>
<span class="stepper-head-text"> step1 </span>
</div>
<div class="stepper-content py-3">
<div class="form-outline mb-4">
<input type="text" id="stepper-form-nome" class="form-control" required />
<label class="form-label" for="stepper-form-nome" >Nome
<small class="text-muted">(obbligatorio)</small></label>
<div class="invalid-Feedback">Inserisci nome</div>
</div>
<div class="form-outline mb-4">
<input type="text" id="stepper-form-cognome"
class="form-control" required />
<label class="form-label" for="stepper-form-cognome">Cognome
<small class="text-muted">(obbligatorio)</small></label>
<div class="invalid-Feedback">Inserisci cognome</div>
</div>
<!-- Pulsanti nav -->
<div class="d-flex justify-content-center px-3">
<button id="next-step" class="btn btn-primary w-100">
Step successivo
</button>
</div>
<!-- Fine pulsanti nav -->
</div>
</li>
<!-- Fine primo step -->
<!-- Secondo step -->
<li id="step-due" class="stepper-step">
<div class="stepper-head">
<span class="stepper-head-icon"> 2 </span>
<span class="stepper-head-text"> step2 </span>
</div>
<div class="stepper-content py-3">
<div class="form-outline mb-4">
<input type="text" id="stepper-form-azienda" class="form-control" />
<label class="form-label" for="stepper-form-azienda">Azienda
<small class="text-muted">(facoltativo)</small></label>
</div>
<div class="form-outline mb-4">
<input type="text" id="stepper-form-indirizzo" class="form-control" required />
<label class="form-label" for="stepper-form-indirizzo">Indirizzo
<small class="text-muted">(obbligatorio)</small></label>
<div class="invalid-Feedback">Inserisci indirizzo</div>
</div>
<div class="form-outline mb-4">
<input type="email" id="stepper-form-email" class="form-control" required />
<label class="form-label" for="stepper-form-email">Email
<small class="text-muted">(obbligatorio)</small></label>
<div class="invalid-Feedback">Inserire email valida (formato xxx@zzz.)</div>
</div>
<div class="form-outline mb-4">
<input type="tel" id="stepper-form-tel" class="form-control" required pattern="[0-9]{3}-[0-9]{7}" />
<label class="form-label" for="stepper-form-tel">Phone
<small class="text-muted">(obbligatorio)</small></label>
<div class="invalid-Feedback">Inserisci numero di telefono valido (formato xxx-xxxxxxx)</div>
</div>
<!-- Pulsanti nav -->
<div class="d-flex justify-content-center px-3">
<button id="prev-step" class="btn btn-primary w-100 me-2">
Step precedente
</button>
<button id="next-step2" class="btn btn-primary w-100">
Step successivo
</button>
</div>
<!-- Fine pulsanti nav -->
</div>
</li>
<!-- Fine secondo step -->
<!-- Terzo step -->
<li id="step-tre" class="stepper-step">
<div class="stepper-head">
<span class="stepper-head-icon"> 3 </span>
<span class="stepper-head-text"> step3 </span>
</div>
<div class="stepper-content py-3">
<select id="cucuzza" class="select form-control" data-mdb-filter="true">
</select>
<div class="form-outline mb-4">
<input type="text" id="form1" class="form-control" />
<label class="form-label" for="form1">Test di intelligenza</label>
<div class="form-helper">Sarà intelligente?</div>
</div>
<div class="form-check d-flex justify-content-center mb-4">
<input class="form-check-input me-2" type="checkBox" value="" id="stepper-form-reg" checked />
<label class="form-check-label" for="stepper-form-reg">
Vuoi creare un account?
</label>
</div>
<!-- Pulsanti nav -->
<div class="d-flex justify-content-center px-3">
<button id="prev-step2" class="btn btn-primary w-100 me-2">
Step precedente
</button>
<button name="invia" id="submit" type="submit" class="btn btn-success btn-block mb-4">
Invia
</button>
</div>
<!-- Fine pulsanti nav -->
</div>
</li>
<!-- Fine terzo step -->
</form>
</ul>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。