Пожалуйста, ребята, у меня есть эта форма, которая состоит из трех этапов. 1. Заполните форму. 2. Просмотрите форму 3. Подтвердите форму. Я хочу, чтобы каждый раз, когда пользователь нажимал следующий на первом этапе, он отображал всю информацию, введенную пользователем на предыдущем этапе. Объясняется далее с изображениями ниже. Страница заполнения формы Страница обзора Страница отправки
Here's my HTML code
<div class="container-fluid">
<!-- ============================================================== -->
<!-- Start Page Content -->
<!-- ============================================================== -->
<div class="card">
<div class="card-body wizard-content">
<% if (locals.message) { %>
<h4>
<%= message %>
</h4>
<% } %>
<h6 class="card-subtitle"></h6>
<form id="example-form" action="/informationupdate" class="m-t-40" method="POST">
<div>
<h3>Account</h3>
<section>
<label for="date">Date *</label>
<input id="date" name="date" type="date" class="required form-control">
<label for="title">Title *</label>
<input id="title" name="title" type="text" class="required form-control">
<label for="message">Message *</label>
<input id="message" name="message" type="text" class="required form-control">
<p>(*) Mandatory</p>
</section>
<h3>Review</h3>
<section>
<ul>
<li>Date</li>
<li>Bar</li>
<li>Foobar</li>
</ul>
</section>
<h3>Finish</h3>
<section>
<input id="acceptTerms" name="acceptTerms" type="checkbox" class="required" a href="/informationupdate">
<label for="acceptTerms">Check the box to successfully send your information.</label>
</section>
</div>
</form>
</div>
</div>
<!-- ============================================================== -->
<!-- End PAge Content -->
</div>
<!-- ============================================================== -->
<!-- End Container fluid -->
Here's my Javascript code for form submission
<script>
// Basic Example with form
var form = $("#example-form");
form.validate({
errorPlacement: function errorPlacement(error, element) { element.before(error); },
rules: {
confirm: {
equalTo: "#password"
}
}
});
form.children("div").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
onStepChanging: function(event, currentIndex, newIndex) {
form.validate().settings.ignore = ":disabled,:hidden";
return form.valid();
},
onFinishing: function(event, currentIndex) {
form.validate().settings.ignore = ":disabled";
return form.valid();
},
onFinished: function(event, currentIndex) {
//form.submit().settings.ignore = ":disabled";
form.submit().alert("submitted")
//alert("Submitted!");
}
});
</script>