После перезагрузки страницы скрипт работы переключателей перестает выполняться

[giwuf]

Есть группа переключателей, которые окрашиваются в темно-серый цвет при выборе переключателя :check.

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

Как это можно исправить?

Код:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
jQuery.noConflict();
jQuery(document).ready(function($) {
  let className = 'label-active';
  let $inputs_time = $('#order_time_field input[type=radio]');
  $inputs_time.change(function(ev) {
    $inputs_time.parent('label').removeClass(className);
    $(this).parent('label').addClass(className);
  });
});
</script>
<style type="text/css">
.form-row label.label-active {
	background-color: #e4e4e4;
}
</style>
<div data-priority="20" class="form-row form-row-wide" id="order_time_field">
  <fieldset>
    <legend>Время доставки</legend><label><input type="radio" name="order_time" value="Ближайшее"> Ближайшее</label><label><input type="radio" name="order_time" value="К определенному времени"> К определенному времени</label></fieldset>
</div>

[рони]

страница перезагружается с уведомлением об ошибке,

может нет скриптов на этой новой странице?

[laimas]

Тут не нужен JS, достаточно CSS, нужно только изменить верстку.

.form-row input:checked + label {
    background-color: #e4e4e4;
}

<input type="radio" name="order_time" id="i1" value="Ближайшее"> 
<label for="i1">Ближайшее</label>
<input type="radio" name="order_time" id="i2" value="К определенному времени"> 
<label for="i2">К определенному времени</label>

[giwuf]

Тут не нужен JS, достаточно CSS, нужно только изменить верстку.

Спасибо, но мне он понадобится, т.к. input планирую скрывать

[giwuf]

может нет скриптов на этой новой странице?

рони, скрипты есть, просто там 2 вкладки (табы) и когда ошибка срабатывает на втором табе, при перезагрузке страницы перебрасывает на первый и переключатели возвращаются в исходное до js состояние

[laimas]

giwuf, сервер то знает параметр запроса, то есть с какой вкладки он был, а значит может и прописать стили так, чтобы при загрузке сделать вкладку открытой. Можно и клиентом анализировать url определяя какую вкладку открыть

[giwuf]

giwuf, сервер то знает параметр запроса, то есть с какой вкладки он был, а значит может и прописать стили так, чтобы при загрузке сделать вкладку открытой. Можно и клиентом анализировать url определяя какую вкладку открыть

laimas, да, спасибо, но, к сожалению, вкладка работает как переключатель и это второй шаг, т.е. изначально нужно попасть на вкладку 1, а с нее уже переход на 2ую вкладку, где и нужна валидация.
А как клиентом проанализировать url который открыть?

[laimas]

Шаг чего? Если форма отправляется методом post, то url может не принимать параметров (хотя форма может и их задать), но форму то сервер принимает и он должен знать откуда она пришла, это ведь тоже может служить признаком. А значит при ошибках отдать вновь форму с раскрытой вкладкой не должно быть проблемой.

[giwuf]

laimas
да, форма отправляется методом post - воспроизвел здесь
https://jsfiddle.net/hwt3Lbec/
Вот так это выглядит на картинке, когда при незаполнении обязательного поля на втором шаге страница перезагружается и перебрасывает на первую вкладку


А вот здесь проверка на ошибку

// Validation: Required fields.
if ( ! empty( $field['required'] ) && empty( $_POST[ $key ] ) ) {
wc_add_notice( sprintf( __( '%s is a required field.', 'woocommerce' ), $field['label'] ), 'error' );
}

[laimas]

Ну господи, какие проблемы. ) Раскрытую/открытую закладку определяют стили, которые клиентом выбираются по щелчку. Но это же может сделать и сервер, отдавая страницу пользователю, достаточно проверять условие, была ли принята форма и есть ли ошибки ее заполнения, то есть пуст ли допустим массив ошибок или некая переменная содержащая ошибку. А так как такой массив/переменная может быть только после приема формы, то достаточно проверять только ее. Отсюда:

вывод кода закладок - кнопка, панель первой закладки - если !$error, значит она открыта по умолчанию (в атрибутах прописаны стили, кнопка выбрана), вывод второй закладки, - если $error, значит делаем эту кнопку открытой (в атрибутах прописаны стили, кнопка выбрана).

Неизвестно что должно быть если форма заполнена верно, но если также должна открываться вторая вкладка, значит для ней проверяется не только ошибки но и POST данные, то есть $_POST || $error - открыть вторую закладку.

Это разве нельзя сделать на сервере?