Вернитесь к div с шагами jquery - PullRequest
0 голосов
/ 08 февраля 2019

Я использую плагин 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?

...