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

时间:2014-05-12 08:31:57

标签: javascript wordpress forms date

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

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

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

但是,当我使用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并在这里和那里进行更改,我得出结论,我使用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
}

1 个答案:

答案 0 :(得分:2)

IDNAME代币必须以字母 ([A-Za-z])开头,可以后跟任意数量的字母,数字([0-9]),连字符("-"),下划线("_"),冒号(":")和句点(".")

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

更多信息herehere