Сброс введенных значений в поля формы при кастомном input для ввода времени

Question

При реализации кастомного input для выбора времени возникает проблема. После заполнения всех полей формы, а именно после выбора времени в соответствующем после нажатия Apply time (кнопка Apply time относится непосредственно к выбору времени) страница обновляется, все введенные значения пропадают. Для данного поля еще есть кнопка Cancel при нажатии которой тоже происходит подобная ситуация. По сути она отменяет выбранное время. На видео показала как именно это происходит Как разрешить проблему?

const inputField = document.getElementById("time-book-table");
const timePicker = document.getElementById("time-picker");

// Показываем или скрываем меню выбора времени
inputField.addEventListener("focus", function () {
    const rect = inputField.getBoundingClientRect();
    timePicker.style.display = "block";
    timePicker.style.top = rect.bottom + "px";
    timePicker.style.left = rect.left + "px";
});

document.addEventListener("click", function (event) {
    if (!timePicker.contains(event.target) && event.target !== inputField) {
        timePicker.style.display = "none";
    }
});

function setTime() {
    const hours = document.getElementById("hours").value;
    const minutes = document.getElementById("minutes").value;
    const ampm = document.getElementById("ampm").value;
    inputField.value = hours + ":" + minutes + " " + ampm;
    timePicker.style.display = "none";
}

// Отменяем выбор времени и скрываем меню
function cancelTime() {
    inputField.value = ""; // Очищаем поле ввода
    timePicker.style.display = "none";
}

<div class="form-page__time-picker">
    <input type="text" id="time-book-table" placeholder="Choose time">

        <div id="time-picker">
            <select id="hours">
            <!-- Опции для выбора часов -->
            <option value="12">12</option>
            <option value="01">01</option>
            <option value="02">02</option>
            <option value="03">03</option>
            <option value="04">04</option>
            <option value="05">05</option>
            <option value="06">06</option>
            <option value="07">07</option>
            <option value="08">08</option>
            <option value="09">09</option>
            <option value="10">10</option>
            <option value="11">11</option>
    </select> :
    <select id="minutes">
            <!-- Опции для выбора минут -->
            <option value="00">00</option>
            <option value="15">15</option>
            <option value="30">30</option>
            <option value="45">45</option>
    </select>
    <select id="ampm">
        <!-- Опции для выбора AM/PM -->
        <option value="AM">AM</option>
        <option value="PM">PM</option>
</select>
    <!-- Кнопки Установить и Отменить -->
    <div>
        <button onclick="setTime()">Apply Time</button>
        <button onclick="cancelTime()">Cancel</button>
    </div>

</div>

БЛОГ НА HUSL

Сброс введенных значений в поля формы при кастомном input для ввода времени

Ответы (0 шт):