Как открыть блок следующего/предыдущего шага с помощью JS-кода?

У меня есть шаблон (HTML/jQuery v3.6) с шагами мастера, определенными как

 <div id="modal-completion-registration" class="modal modal-completion-registration">


<div class="completion-registration__progress">


<div class="completion-registration__progress-item active" data-registration-step="1">


...


</div>


<div class="completion-registration__progress-item" data-registration-step="2">


...


</div>


<div class="completion-registration__progress-item" data-registration-step="3">


...


</div>


</div>

HTML:

Я предполагаю, что при нажатии кнопки на любом блоке шагов блок следующего шага становится активным автоматически, но в реальном приложении

любой шаг отправляется с помощью ajax-запроса, и в зависимости от статуса запроса (успех/неуспех) мне нужно перейти к следующему шагу программно

с JS-кодом.

Как я могу открыть блок следующего/предыдущего шага с помощью кода JS? В этом шаблоне используются jquery3.6.0 и jquery-ui-1.12.1 без каких-либо дополнительных плагинов jquery. Я погуглил в сети и не нашел описания этой функциональности. Дайте, пожалуйста, относительную ссылку... Спасибо!

Это отличный пример того, как умственное раздражение jQuery и откровенный тупой мусор, которым является jQuery-UI, обманывают людей, заставляя их не знать даже самых элементарных концепций и, что еще хуже, думать с точки зрения написания только сценариев.

Формы, как правило, очень важны, поэтому первым шагом будет создание рабочей формы БЕЗ сценария!

Эти бесконечные бессмысленные DIV и классы НИЧЕГО тоже не приносят вам никакой пользы.

Я бы разделил каждый из этих разделов на FIELDSET, поскольку на самом деле они представляют собой наборы полей.

Напишите это в нормальной форме вот так.

Затем, чтобы реализовать эти шаги, добавьте кнопку РАДИО перед каждым разделом, а также дополнительную кнопку в начале со значением «noscript». Таким образом, подача может быть пошаговой или бесступенчатой.

 


#demo > fieldset {


/* hide these off screen, since display:none breaks navigation */


position:absolute;


bottom:100%;


right:100%;


}


#demo input[name="step"][value="noscript] ~ fieldset,


#demo input[name="step"]:checked + fieldset {


display:static; /* remove all positioning */


}

Код (разметка): версия со сценарием затем при загрузке переводит выбранную кнопку на первый шаг, указывая, что мы получили отправку по сценарию.

Затем перехватите отправку для отправки данных на сервер и перейдите к следующему переключателю.

  { let stepSelected = document.querySelector("input[name=step]"); const advanceSelected = () => { if (stepSelected) do { stepSelected = stepSelected.nextElementSibling; } while ( stepSelected && stepSelected.tagName != "INPUT" ); if (stepSelected) stepSelected.checked = true; return stepSelected; }, stepSubmitSuccess = () { if (!advanceSelected()) { /* reached end, show your "submit successfully" message */ } }, stepSubmit = (e) => { let data = new FormData(this.currentTarget); /* do your ajax submit here.






When it succeeds call stepSubmitSuccess() */ }; document.getElementById("demo").addEventListener("submit", stepSubmit); advanceSelected(); }

Код (разметка): Возможно, в нем есть опечатки, он не проверен, но должен помочь. Как теперь показать/скрыть этот набор полей?

  <form id="demo"> <input type="radio" name="step" value="noscript" checked hidden> <input type="radio" name="step" value="1" hidden> <fieldset> <legend>Describe Step 1 Here</legend> <!-- inputs and labels here --> </fieldset> <input type="radio" name="step" value="2" hidden> <fieldset> <legend>Describe Step 2 Here</legend> <!-- inputs and labels here --> </fieldset> <input type="radio" name="step" value="3" hidden> <fieldset> <legend>Describe Step 3 Here</legend> <!-- inputs and labels here --> </fieldset> <footer> <button>Submit</button> </footer> </form> 

Код (разметка): позволяем CSS выполнять всю тяжелую работу и открываем возможности для создания CSS-анимации. На стороне сервера, если $_POST["step"] == noscript, вы обрабатываете всю форму.

Если для него установлено число, обработайте только этот шаг.

При извлечении FormData вы можете удалить поля, которые не являются частью вашего текущего шага.

Жаль, что вы не можете использовать FormData для набора полей.

хотя другим подходом может быть создание FormData с использованием глубокого обхода DOM. Хм... это натолкнуло меня на идею для статьи на Medium.