Я использую плагин jquery step на странице оформления заказа в моем интернет-магазине.
На последнем шаге, который является div-идентификатором step-4, я распечатываю данные, введенные пользователем, чтобы он мог видеть все данные, которые он дал.
Iиметь эту форму:
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn'),
allBackBtn = $('.backBtn');
allWells.hide();
navListItems.click(function(e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$('#user_vnev').focus();
}
});
allNextBtn.click(function() {
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for (var i = 0; i < curInputs.length; i++) {
if (!curInputs[i].validity.valid) {
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid)
nextStepWizard.removeAttr('disabled').trigger('click');
$("html, body").animate({
scrollTop: 0
}, "slow");
});
allBackBtn.click(function() {
var curStep = $(this).closest(".setup-content");
var curStepBtn = curStep.attr("id");
var currStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().children("a");
var prevStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a");
prevStepWizard.trigger('click');
currStepWizard.attr("disabled", "disabled");
$("html, body").animate({
scrollTop: 0
}, "slow");
});
$('div.setup-panel div a.btn-primary').trigger('click');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.js"></script>
<form role="form" action="" method="post">
<div class="row setup-content" id="step-1">
<div class="col-md-12">
<h3 class="megrendeles_form_title">Kapcsolatfelvételi adatok</h3>
</div>
<div class="form-group col-md-6"> <span class="megrendeles_input_title">Vezetéknév *</span>
<input required type="text" name="user_vnev" id="user_vnev" class="form-control input-lg" value="">
</div>
<div class="form-group col-md-6"> <span class="megrendeles_input_title">Keresztnév *</span>
<input required type="text" name="user_knev" id="user_knev" class="form-control input-lg" value="">
</div>
<div class="form-group col-md-6"> <span class="megrendeles_input_title">E-mail cím *</span>
<input required type="text" name="user_email" id="user_email" class="form-control input-lg" value="">
</div>
<div class="form-group col-md-6"> <span class="megrendeles_input_title">Telefonszám *</span>
<input required type="text" name="user_tel" id="user_tel" class="form-control input-lg" value="">
</div>
<div class="clearfix"></div>
<div class="form-group col-md-12">
<button class="btn nextBtn" type="button">Következő</button>
</div>
<div class="clearfix"></div>
</div>
<div class="row setup-content" id="step-2">
<div class="col-md-12">
<h3 class="megrendeles_form_title">Szállítási mód kiválasztása</h3>
</div>
<div class="col-md-12">
<div>
<select class="dropdown-item input-lg" name="atvetel" id="atvetel_select">
<option value="0">Válasszon szállítási módot</option>
<option value="13">MPL futárszolgálat</option>
<option value="16">Személyes átvétel az üzletben</option>
</select>
</div>
<img src="/images/assets/preloader.gif" id="preloader_atvetel" class="img-responsive preloader_img">
<div id="atvetel_result" class="content"></div>
<div id="atvetel_result_alert" style="display:none"></div>
</div>
<div class="col-md-12">
<h3 class="megrendeles_form_title">Szállítási cím</h3>
</div>
<div class="form-group col-md-6"> <span class="megrendeles_input_title">Irányítószám *</span>
<input required type="text" name="user_szallit_irsz" id="user_szallit_irsz" class="form-control input-lg" value="">
</div>
<div class="form-group col-md-6"> <span class="megrendeles_input_title">Település *</span>
<input required type="text" name="user_szallit_varos" id="user_szallit_varos" class="form-control input-lg" value="">
</div>
<div class="clearfix"></div>
<div class="form-group col-md-12"> <span class="megrendeles_input_title">Utca, házszám *</span>
<input required type="text" name="user_szallit_utca" id="user_szallit_utca" class="form-control input-lg" value="">
</div>
<div class="clearfix"></div>
<div class="form-group col-md-12">
<button class="btn nextBtn" type="button">Következő</button>
<button class="btn backBtn" type="button">Vissza</button>
</div>
<div class="clearfix"></div>
</div>
<div class="row setup-content" id="step-3">
<div class="col-md-12">
<h3 class="megrendeles_form_title">Fizetési mód kiválasztása</h3>
</div>
<div id="payment_mods"></div>
<img src="/images/assets/preloader.gif" id="preloader_fizetes" class="img-responsive preloader_img">
<div id="fizetes_result" class="content col-md-12"></div>
<div class="col-md-12">
<h3 class="megrendeles_form_title">Számlázási adatok</h3>
</div>
<div class="form-group col-md-12">
<div class="checkbox">
<label style="margin-left:5px;"><input id="copy" type="checkbox">A számlázási adatok megegyeznek a szállítási adatokkal</label>
</div>
</div>
<div class="form-group col-md-12"> <span class="megrendeles_input_title">Számlázási név *</span>
<input required type="text" name="user_szamla_nev" id="user_szamla_nev" class="form-control input-lg" value="">
</div>
<div class="form-group col-md-6"> <span class="megrendeles_input_title">Irányítószám *</span>
<input required type="text" name="user_szamla_irsz" id="user_szamla_irsz" class="form-control input-lg" value="">
</div>
<div class="form-group col-md-6"> <span class="megrendeles_input_title">Település *</span>
<input required type="text" name="user_szamla_varos" id="user_szamla_varos" class="form-control input-lg" value="">
</div>
<div class="form-group col-md-6"> <span class="megrendeles_input_title">Utca, házszám *</span>
<input required type="text" name="user_szamla_utca" id="user_szamla_utca" class="form-control input-lg" value="">
</div>
<div class="form-group col-md-6"> <span class="megrendeles_input_title">Adószám (Cég, jogi személy esetén)</span>
<input type="text" name="user_adoszam" id="user_adoszam" class="form-control input-lg" value="">
</div>
<div class="clearfix"></div>
<div class="form-group col-md-12">
<button class="btn nextBtn" type="button" id="Copy_data_to_osszegzes">Következő</button>
<button class="btn backBtn" type="button">Vissza</button>
</div>
<div class="clearfix"></div>
</div>
<div class="row setup-content" id="step-4">
<div class="col-md-12">
<h3 class="megrendeles_form_title">Adatok összegzése</h3>
</div>
<div class="col-md-4 col-xs-12">
<span class="osszegzes_title">Kapcsolatfelvételi adatok <span title="Módosít" class="modify_icon" id="modify_contact"><i class="fa fa-edit" aria-hidden="true"></i></span></span>
<span class="osszegzes_text" id="osszegzes_nev"></span>
<span class="osszegzes_text" id="osszegzes_email"></span>
<span class="osszegzes_text" id="osszegzes_tel"></span>
</div>
<div class="col-md-4 col-xs-12">
<span class="osszegzes_title">Szállítási adatok <span title="Módosít" class="modify_icon" id="modify_szallitas"><i class="fa fa-edit" aria-hidden="true"></i></span></span>
<span class="osszegzes_text" id="osszegzes_szallitas_mod"></span>
<span class="osszegzes_text" id="osszegzes_szallitas_irsz_varos"></span>
<span class="osszegzes_text" id="osszegzes_szallitas_utca"></span>
</div>
<div class="col-md-4 col-xs-12">
<span class="osszegzes_title">Fizetési, számlázási adatok <span title="Módosít" class="modify_icon" id="modify_fizetes"><i class="fa fa-edit" aria-hidden="true"></i></span></span>
<span class="osszegzes_text" id="osszegzes_fizetes_mod">Előre utalás</span>
<span class="osszegzes_text" id="osszegzes_fizetes_nev">Teszt Webshop Kft.</span>
<span class="osszegzes_text" id="osszegzes_fizetes_irsz_varos">1125 Budapest</span>
<span class="osszegzes_text" id="osszegzes_fizetes_utca">Istenhegyi út 122.</span>
<span class="osszegzes_text" id="osszegzes_fizetes_adoszam">10337243-2-13</span>
</div>
<div class="clearfix"></div>
<div class="col-md-12" style="margin-bottom:15px">
<span class="osszegzes_title">Termék(ek)</span>
<span class="osszegzes_text">1 darab Gigabyte Z370 AORUS ULTRA GAMING WIFI alaplap</span>
</div>
<div class="clearfix"></div>
<div class="col-md-12">
<span class="osszegzes_title">Megjegyzés a rendeléshez</span>
<p class="osszegzes_text">Üzenet a webáruház munkatársának, vagy a futárszolgálatnak.</p>
<textarea rows="3" class="form-control osszegzes_textarea" name="egyeb"></textarea>
</div>
<div class="clearfix"></div>
<div class="text-center col-md-12 send_buttons_div">
<button class="btn backBtn" type="button">Vissza</button>
<button type="submit" class="btn send_megrendeles" name="send_megrendeles">Megrendelés elküldése</button>
</div>
</div>
</form>
Мой вопрос: если я нажму на диапазон #modify_szallitas, как я могу вернуться к разделу # step-2?