Not able to get correct date value in javascript

Question

[I have updated this question below, please see new question on infinite looping of alert]

I have a date of birth field in my form and there is an input field as well as date picker.

After keying in the correct value, the change function is activated and runs the logic as below to do some processing to the date of birth to get age.

However, when I use alert() to prompt for the value of the date of birth, I am not able to see the value I keyed in reflected, instead, it is showing an empty string.

I tried document.getElementById("9_element14").value, but that didn't work, it showed undefined. So I switched to jQuery and now it shows empty string.

It is a Wordpress form maker form, so there is restriction in amending the HTML, but I can change the JavaScript.

Any advice is much appreciated.

The link to the form is here: http://lionfish.vodien.com/~scforgsg/RC7/menu-parent-courses/course-application/

My codes are as below:

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
}

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

Thanks guys for helping! Using jsfiddle and making changes here and there, I derived the conclusion that the way I was using substring for dob was not working, causing the whole function to fail.

So now I have corrected it. Only problem now is that I am getting an infinite looping of alerts when date of birth is invalid.

NEW CODES:

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

The ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Change your element identificators according the rules and everything will work.

More information here and here.