无法在 javascript 中获取正确的日期值

Question

[我在下面更新了这个问题，请参阅关于无限循环警报的新问题]

我的表单中有一个出生日期字段，还有一个输入字段和日期选择器。

键入正确的值后，更改功能被激活并运行如下逻辑对出生日期进行一些处理以获取年龄。

但是，当我使用alert() 提示输入出生日期的值时，我无法看到我键入的值反映，而是显示一个空字符串。

我试过document.getElementById("9_element14").value，但没用，它显示未定义。所以我切换到jQuery，现在它显示空字符串。

它是一个 Wordpress 表单生成器表单，因此修改 HTML 有限制，但我可以更改 JavaScript。

非常感谢任何建议。

表格的链接在这里： http://lionfish.vodien.com/~scforgsg/RC7/menu-parent-courses/course-application/

我的代码如下：

HTML

<tr id="9" type="type_date"><td valign="middle" align="left" id="9_label_section14" class="">
<span id="9_element_label14" class="label">Date of Birth:</span>
<span id="9_required_element14" class="required"> *</span></td>
<td valign="middle" align="left" id="9_element_section14" class=" toolbar_padding"><input type="hidden" value="type_date" name="9_type14" id="9_type14">
<input type="hidden" value="yes" name="9_required14" id="9_required14">
<input type="text" value="" class="wdform_date" id="9_element14" name="9_element14" maxlength="10" size="10" onchange="change_value('9_element14')">
<input id="9_button14" type="reset" value="..." format="%d-%m-%Y" onclick="return showCalendar('9_element14' ,'%d-%m-%Y')" class="button">
</td>
</tr>

JAVASCRIPT

 // before form is load
function before_load()
{   

}   


$(document).ready(function() {
    $('[id$=11]').hide();
    $('[id$=49]').hide();
});

// before form submit
function before_submit()
{

}   
// before form reset
function before_reset()
{   
}

function on_choose_course() {
 var course = document.getElementById("1_element14");
var selected = course.options[course.options.selectedIndex].value;
if (selected=="Canoe Polo Lvl 1" || selected=="Kayaking Orientation" || selected=="1 Star Award"){
       $('[id$=49]').hide();
}
else{
       $('[id$=49]').show();
 }


}

$(function(){
$('[id$=9_element14]').change(function(e) {
       on_date_select();
    });
});

function ValidateDate(dtValue)
{
var dtRegex = new RegExp(/\b\d{1,2}[\-]\d{1,2}[\-]\d{4}\b/);
return dtRegex.test(dtValue);
}


function on_date_select() {
//calculate age
var current_year = new Date().getFullYear();

if ($('[id$=9_element14]').length) {
var dob = $('[id$=9_element14]').val();

alert($('[id$=9_element14]').val());

if (ValidateDate(dob)){
var age = current_year - substr(dob, 6, 10);
alert(substr(dob, 6, 10));
alert(age);

if (age<21){
//show declaration is 21 and above
   $('[id$=11]').show();
}

if (age>=21){
//show declaration is 21 and above
   $('[id$=11]').hide();
}
}//end validatedate
}//end check empty
}

================================================ ====================

感谢大家的帮助！使用 jsfiddle 并在这里和那里进行更改，我得出的结论是我使用 substring for dob 的方式不起作用，导致整个函数失败。

所以现在我已经更正了。现在唯一的问题是，当出生日期无效时，我会收到无限循环的警报。

新代码：

// before form is load
function before_load()
{   

}   


$(document).ready(function() {
    $('[id$=11]').hide();
    $('[id$=49]').hide();
});

// before form submit
function before_submit()
{
  checkDetails($('[id$=15_element140]'),$('[id$=21_element14]'));
}   
// before form reset
function before_reset()
{   
}

function on_choose_course() {
 var course = document.getElementById("1_element14");
var selected = course.options[course.options.selectedIndex].value;
if (selected=="Canoe Polo Lvl 1" || selected=="Kayaking Orientation" || selected=="1 Star Award"){
       $('[id$=49]').hide();
}
else{
       $('[id$=49]').show();
 }

}

function checkDetails(e,f){
 if (e.checked && (f.trim()).length==0){
   alert("Please give details about the medical condition.");
   e.focus();
 }
}

$(function(){
$('[id$=9_element14]').change(function(e) {
       on_date_select();
    });
});

function ValidateDate(dtValue)
{
var dtRegex = new RegExp(/\b\d{1,2}[\-]\d{1,2}[\-]\d{4}\b/);
return dtRegex.test(dtValue);
}


function on_date_select() {
//calculate age
var current_year = new Date().getFullYear();

if ($('[id$=9_element14]').length) {
var dob = $('[id$=9_element14]').val();

if (ValidateDate(dob)){
var age = current_year - dob.substring(6, 10);

if (age<21){
//show declaration is 21 and above
   $('[id$=11]').show();
}

if (age>=21){
//show declaration is 21 and above
   $('[id$=11]').hide();
}
}else{
$('[id$=9_element14]').focus(
function() {
alert("Date of Birth is invalid");
}
);
}//end validatedate
}//end check empty
}

Answer 1

ID 和 NAME 标记必须以字母开头 ([A-Za-z]) 和可以后跟任意数量的字母、数字 ([0-9])、连字符("-")，下划线("_")，冒号(":")，句点(".")。

根据规则更改您的元素标识符，一切都会正常工作。

更多信息here 和here。