reserve/public/index.js

function flush_reserve_info() {

    $.get('/get_reserve_info', (data, status)=> {
        let json = JSON.parse(data)

        console.log(json)

        let day = $('#select-day').val()

        if(day != '...') {

            for(let time=1; time<=6; time++) {

                let info = json[`${day}-${time}`]

                let text = $(`#reserve-${time}`).text()

                if(info.name != '') {
                    if(!text.includes('[')) {
                        $(`#reserve-${time}`).text(text + " [已预约]")
                        $(`#radio-${time}`).prop("disabled", true);
                        $(`#radio-${time}`).prop("checked", false);
                    }
                } else {
                    if(text.includes(']')) {
                        $(`#reserve-${time}`).text(text.replace(" [已预约]", ""))
                        $(`#radio-${time}`).prop("disabled", false);
                    }
                }
                
            }
        }

    })

}

flush_reserve_info()

const intervalId = setInterval(flush_reserve_info, 1000);

$(document).ready(function() {

$("#back-btn").click(()=>{
    $("#main").show()
    $("#pending").hide();
})

  $("#submit-btn").click(function() {

    $("#main").hide()
    $("#pending").show();

    let day = $("#select-day").val();
    let time = -1;
    for(let i=1; i<=6; i++) {
        if($(`#radio-${i}`).prop('checked')) {
            time = i
        }
    }

    let password = $("#password").val();
    let name = $("#name").val();
    let phone = $("#phone").val();

    // 创建表单数据对象
    let formData = {
      day: day,
      time: time,
      password: password,
      name: name,
      phone: phone
    };

    // 发送POST请求
    $.ajax({
      url: "/reserve",
      type: "POST",
      data: formData,
      timeout: 2000, // 设置超时时间
      success: function(response) {
        // 请求成功的处理逻辑
        console.log(response);
        $('#server-message').text(response.message)
      },
      error: function(xhr, status, error) {
        // 请求失败的处理逻辑
        console.log(error);
      },
      complete: function(xhr, status) {
        // 请求完成的处理逻辑（无论成功或失败）
        console.log(status);
      }
    });
  });
});



document.getElementById("submit-btn").addEventListener("click", function () {
    // 表单验证通过后的操作
  });
  
  document.getElementById("select-day").addEventListener("change", function () {
    if (this.value === "") {
      this.classList.add("is-invalid");
      document.getElementById("select-day-error").classList.add("is-invalid");
    } else {
      this.classList.remove("is-invalid");
      document.getElementById("select-day-error").classList.remove("is-invalid");
    }
    updateSubmitButtonState();
  });
  
  let radioButtons = document.querySelectorAll('input[name="flexRadioDefault"]');
  for (let i = 0; i < radioButtons.length; i++) {
    radioButtons[i].addEventListener("change", function () {
      if (document.querySelector('input[name="flexRadioDefault"]:checked')) {
        for (let j = 0; j < radioButtons.length; j++) {
          radioButtons[j].classList.remove("is-invalid");
        }
        document.getElementById("select-time-error").classList.remove("is-invalid");
      } else {
        for (let k = 0; k < radioButtons.length; k++) {
          radioButtons[k].classList.add("is-invalid");
        }
        document.getElementById("select-time-error").classList.add("is-invalid");
      }
      updateSubmitButtonState();
    });
  }
  
  document.getElementById("password").addEventListener("input", function () {
    if (this.value === "") {
      this.classList.add("is-invalid");
      document.getElementById("password-error").classList.add("is-invalid");
    } else {
      this.classList.remove("is-invalid");
      document.getElementById("password-error").classList.remove("is-invalid");
    }
    updateSubmitButtonState();
  });
  
  document.getElementById("name").addEventListener("input", function () {
    if (this.value === "") {
      this.classList.add("is-invalid");
      document.getElementById("name-error").classList.add("is-invalid");
    } else {
      this.classList.remove("is-invalid");
      document.getElementById("name-error").classList.remove("is-invalid");
    }
    updateSubmitButtonState();
  });
  
  document.getElementById("phone").addEventListener("input", function () {
    if (this.value === "") {
      this.classList.add("is-invalid");
      document.getElementById("phone-error").classList.add("is-invalid");
    } else {
      this.classList.remove("is-invalid");
      document.getElementById("phone-error").classList.remove("is-invalid");
    }
    updateSubmitButtonState();
  });
  
  function updateSubmitButtonState() {
    let selectDay = document.getElementById("select-day");
    let radios = document.querySelectorAll('input[name="flexRadioDefault"]');
    let password = document.getElementById("password");
    let name = document.getElementById("name");
    let phone = document.getElementById("phone");
    let submitButton = document.getElementById("submit-btn");
  
    if (
      selectDay.value !== "" &&
      document.querySelector('input[name="flexRadioDefault"]:checked') &&
      password.value !== "" &&
      name.value !== "" &&
      phone.value !== ""
    ) {
      submitButton.disabled = false;
    } else {
      submitButton.disabled = true;
    }
  }