Question

我一直在jsfiddle测试这个，但是我无法让它工作。基本上我试图在每次更改其中一个下拉列表时验证starttime和endtime，这应该调用函数checktime（），它将查看开始时间是否在结束时间之后，否则会出现错误消息。我有以下HTML代码和两个下拉列表来选择开始时间和结束时间：

<form id="my_form">
<dd><label for="Record_Start_Time">Start Time:</label>
<select name="Record_Start_Time" id="Record_Start_Time" onchange="checktime()">
<option selected value="0800">0800 - 8:00 am</option>
<option  value="0830">0830 - 8:30 am</option>
<option  value="0900">0900 - 9:00 am</option>
<option  value="0930">0930 - 9:30 am</option>
<option  value="1000">1000 - 10:00 am</option>
<option  value="1030">1030 - 10:30 am</option>
<option  value="1100">1100 - 11:00 am</option>
<option  value="1130">1130 - 11:30 am</option>
<option  value="1200">1200 - 12:00 pm</option>
<option  value="1230">1230 - 12:30 pm</option>
<option  value="1300">1300 - 1:00 pm</option>
<option  value="1330">1330 - 1:30 pm</option>
<option  value="1400">1400 - 2:00 pm</option>
<option  value="1430">1430 - 2:30 pm</option>
<option  value="1500">1500 - 3:00 pm</option>
<option  value="1530">1530 - 3:30 pm</option>
<option  value="1600">1600 - 4:00 pm</option>
<option  value="1630">1630 - 4:30 pm</option>
</select></dd>
<dd><label for="Record_End_Time">End Time:</label>
<select name="Record_End_Time" id="Record_End_Time" onchange="checktime()">
<option selected value="0830">0830 - 8:30 am</option>
<option  value="0900">0900 - 9:00 am</option>
<option  value="0930">0930 - 9:30 am</option>
<option  value="1000">1000 - 10:00 am</option>
<option  value="1030">1030 - 10:30 am</option>
<option  value="1100">1100 - 11:00 am</option>
<option  value="1130">1130 - 11:30 am</option>
<option  value="1200">1200 - 12:00 pm</option>
<option  value="1230">1230 - 12:30 pm</option>
<option  value="1300">1300 - 1:00 pm</option>
<option  value="1330">1330 - 1:30 pm</option>
<option  value="1400">1400 - 2:00 pm</option>
<option  value="1430">1430 - 2:30 pm</option>
<option  value="1500">1500 - 3:00 pm</option>
<option  value="1530">1530 - 3:30 pm</option>
<option  value="1600">1600 - 4:00 pm</option>
<option  value="1630">1630 - 4:30 pm</option>
<option  value="1700">1700 - 5:00 pm</option>
</select></dd>
 </form>

以下Javascript：

function checktime(){
//start time
var start_time = $("#Record_Start_Time").val();
//end time
var end_time = $("#Record_End_Time").val();
//by this you can see time stamp value in console via firebug
console.log("Time1: "+ start_time + " Time2: " + end_time);

if(start_time > end_time) {
$("#start_time").after('<span class="error"><br>Start-time must be smaller then End-   time.</span>');
$("#end_time").after('<span class="error"><br>End-time must be bigger then Start-time.</span>');
    return false;
}

当我运行代码时，我在控制台中看到以下错误：

Uncaught SyntaxError：意外的令牌）

未捕获的ReferenceError：未定义checktime

显然我的语法有问题，我只是看不到它，所以一些新鲜的眼睛可能不会受到伤害。我也可能完全错误，应该只是检查提交而不是onchange。帮助/建议任何人？

链接到JSFiddle：http://jsfiddle.net/dUe83/13/

Answer 1

这是一个有效的演示：http://jsfiddle.net/maximgladkov/6H4b7/2/

您的代码存在一些问题：

代码末尾缺少}。
元素的ID不正确：start_time而不是Record_Start_Time和end_time而不是Record_End_Time。
你应该在JSFiddle中使用window.checktime = function() {...}而不是function checktime() {...}，因为它会将你的代码变成虚函数，你的函数被认为是本地的。通过使用window.checktime = function() {...}，您可以将其设为全局。

Answer 2

我对你的jsfiddle进行了一些修改

http://jsfiddle.net/dUe83/15/

$(function(){
function checktime() {
    //start time
    var start_time = $("#Record_Start_Time").val();
    //end time
    var end_time = $("#Record_End_Time").val();
    //by this you can see time stamp value in console via firebug
    console.log("Time1: " + start_time + " Time2: " + end_time);

    if (start_time > end_time) {
        $("#start_time").after('<span class="error"><br>Start-time must be smaller then End-time.</span>');
        $("#end_time").after('<span class="error"><br>End-time must be bigger then Start-time.</span>');
        return false;
    }}});

你在最后忘记了一个“}”和$（）的东西

Javascript比较开始时间和结束时间onchange（）以确保有效

2 个答案: