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

Question

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

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

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

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

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

它是一个Wordpress form maker form，所以修改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 并在这里和那里进行更改，我得出结论，我对 dob 使用 substring 的方式不起作用，导致整个函数失败。

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

新代码:

// 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 .