时间戳

首页 > 解决方案 > （课程预订功能）在用户点击 HTML 表单提交之前提示他们选择了周末日期

javascript - （课程预订功能）在用户点击 HTML 表单提交之前提示他们选择了周末日期

问题描述

问题简介

我目前正在开发一个预订功能，会员可以购买两种不同类型的课程套餐，第一个是“仅限工作日”套餐，而另一个套餐允许“全天”。

我不想为“仅限工作日”套餐持有者禁用周末和公共假期的选择，因为他们仍然需要能够预订这些日期，尽管需要额外付费。

想知道在点击 HTML 表单上的提交之前，是否有任何方法可以通知“仅限工作日”套餐持有者他们选择了周末/公共假期。

目前的方法

在会员的主页上，只要他们当前的帐户有一个活动包，他们就可以单击“预订课程”按钮，将包信息保存在 mysql 中，状态为 '0 = No Package' ， '1 = Weekday Only包”和“2 = 任何一天的包”。

单击“预订课程”按钮后，他们将被重定向到允许用户选择日期和课程位置的表单。提交表格后，将根据提交的日期检查日期，如果会员套餐状态 = '1' 并且所选日期为周六/周日，则在允许会员确认之前，它会提示会员有关额外费用的信息预订。

当前方法只能检查点击提交按钮后的日期，以及提交的表单，

感谢您的时间和投入。

标签： javascriptphphtml

解决方案

在 Javascript 中，您可以添加一个事件侦听器，该事件侦听器将触发一个处理函数，该处理函数验证日期以确定是否在每次输入更改时是周末。

在上述函数中，您可以使用getDay()方法验证是否是周末，下面的代码/伪代码可能是一个好的开始：

let yourDateField = document.getElementByID("you-date-field");

yourDateField.addEventListener('input', function (evt) {

    let selectedDate = new Date(yourDateField.value);

    let day = selectedDate.getDay();

    if(day === 6){

      alert("The date you chose is on a Saturday");

    }
    else if(day === 0){

      alert("The date you chose is on a Sunday");

    }else{

      //Proceed with class signup.

    }

});

答案假定您在进行验证之前不需要检查数据库。

推荐阅读