1

Есть очень длинная форма в модальном окне, разделенная на 3 части, видимой должна быть только одна из частей, а по клику на кнопку "далее", нужно показывать следующую часть, то есть смещать видимую часть формы. Как такое можно реализовать?

Примерная верстка такая:

<form class="form" action="">

    <div class="progress">
        <div class="progress__wrapper">
            <div class="progress__wrapper-bar"></div>
        </div>
    </div>
    введите сюда код
    <div class="form__section">
        <div class="form__content">
            <input type="text">
            <input type="text">
            <input type="text">
        </div>
        <button>Далее</button>
    </div>
    <div class="form__section">
        <div class="form__content">
            <input type="text">
            <input type="text">
            <input type="text">
        </div>
        <button>Далее</button>
    </div>
    <div class="form__section">
        <div class="form__content">
            <input type="text">
            <input type="text">
            <input type="text">
        </div>
    </div>
    <button type="submit">Submit</button>
</form>

UPD И как можно реализовать строку с прогрессом, чтобы по мере движения по частям формы, менялась процентная ширина у блока progress__wrapper-bar. То есть, исходя из того, что у нас 3 части формы, сначала ширина 33.33%, после нажатия на "далее" - 66.66%, и в конце - 100%

4
  • Необходимо скрывать текущую "form__section" и открывать следующую или просто открывать следующую, оставляя текущую открытой?
    – Gonzo
    Commented 20 сент. 2019 в 7:49
  • @Gonzo необходимо скрывать текущую при открытии следующей
    – Arsenij
    Commented 20 сент. 2019 в 8:02
  • @Gonzo дополнил вопрос, можете ещё немного помочь?
    – Arsenij
    Commented 20 сент. 2019 в 13:19
  • Обновил код ответа
    – Gonzo
    Commented 20 сент. 2019 в 13:58

1 ответ 1

1

Можно реализовать следующим образом: Все секции формы сделать по умолчанию скрытыми (display:none), а первой секции задать класс ".showed" который ее откроет. Пометить кнопки каким-нибудь классом, например ".next", по клику на кнопку подниматься до родительской ноды с классом "form__section", удалять у нее класс ".showed" и добавлять этот класс следующей секции.

Если используете JQuery то можно сделать вот так:

$(function(){
  var next = $('.next');
  var progress = $('.progress__wrapper-bar');
  var stepsCount = $('.form__section').length;
  var currentStep = 1;

  function calculate(current, total) { // Функция для подсчета текущего %
     return (current / total) * 100
  }
 
  progress.width(calculate(currentStep, stepsCount) + '%'); // устанавливаем начальную ширину полосы
  next.on('click', function(){
    var currentSection = $(this).parents('.form__section');
    currentSection.removeClass('form__section_showed');
    currentSection.next().addClass('form__section_showed');
    progress.width(calculate(++currentStep, stepsCount) + '%') // устанавливаем ширину полосы после изменения шага
  });
});
.form__section {
  display: none;
}

.form__section_showed {
  display: block;
}

/* progress */

.progress__wrapper {
  display: block;
  width: 100%;
  background-color: #ccc;
  margin-bottom: 10px;
}

.progress__wrapper-bar {
  height: 5px;
  width: 0%;
  background-color: blue;
  transition: width .5s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form" action="">
    <div class="progress">
        <div class="progress__wrapper">
            <div class="progress__wrapper-bar"></div>
        </div>
    </div>
    <div class="form__section form__section_showed">
        <div class="form__content">
            <input type="text">
            <input type="text">
            <input type="text">
        </div>
        <button type="button" class="next">Далее</button>
    </div>
    <div class="form__section">
        <div class="form__content">
            <input type="text">
            <input type="text">
            <input type="text">
        </div>
        <button type="button" class="next">Далее</button>
    </div>
    <div class="form__section">
        <div class="form__content">
            <input type="text">
            <input type="text">
            <input type="text">
        </div>
    </div>
    <button type="submit">Submit</button>
</form>

2
  • Спасибо! Попробую реализовать
    – Arsenij
    Commented 20 сент. 2019 в 8:16
  • Получилось именно то, что нужно
    – Arsenij
    Commented 20 сент. 2019 в 12:21

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.