Question

I have been working for some time on an application form for an insurance company. They sell travel insurance.

As an additional small feature they have asked me to take the dates the depart and return dates the user inputs, calculate the number of days between them and then display number in the ‘days’ box. The goal of which is so that the user can enter the two dates and have the number of days auto-calculated.

I have already created a function which properly calculates the date and I have tested it using manually assigned date values.

My issue has come up when using the JS calendar.

What I tried to do was use the onblur of the second box to access the function and spit the date out into the ‘days’ box. I quickly realized that the onblur is triggered before the code for the JS calendar puts in the date, hence there is no date for the function and the function does not run.

I then tried to use onchange and realized it would not work either because the user is not actually changing the date, code is.

So what I tried to do next was use an Interval to trigger the function, this is where I have run into issues.

Below is my code in my caldate.js file which is attached to my HTML form.

    var namestart = new Array ();
namestart[0] = "trav_emer_single_date_go";
namestart[1] = "trav_emer_extend_date_go";
namestart[2] = "allinc_single_date_go";
namestart[3] = "allinc_annual_date_go";
namestart[4] = "cancel_date_go";
namestart[5] = "visitor_supervisa_date_go";
namestart[6] = "visitor_student_date_go";
namestart[7] = "visitor_xpat_date_go";

var namend = new Array ();
namend[0] = "trav_emer_single_date_ba";
namend[1] = "trav_emer_extend_date_ba";
namend[2] = "allinc_single_date_ba";
namend[3] = "allinc_annual_date_ba";
namend[4] = "cancel_date_ba";
namend[5] = "visitor_supervisa_date_ba";
namend[6] = "visitor_student_date_ba";
namend[7] = "visitor_xpat_date_ba";

var names = new Array ();
names[0] = "trav_emer_single_days";
names[1] = "trav_emer_extend_days";
names[2] = "allinc_single_days";
names[3] = "allinc_annual_days";
names[4] = "cancel_days";
names[5] = "visitor_supervisa_days";
names[6] = "visitor_student_days";
names[7] = "visitor_xpat_days";


    function daysBetween() {

for (var i = 0; i < 8; i++) {   

//Get the value of the current form elements
var start = document.getElementById(namestart[i]).value;
var end = document.getElementById(namend[i]).value;

//Duration of a day
var d = 1000*60*60*24;

// Split Date one
var x = start.split("-");
// Split Date two
var y = end.split("-");

/// // Set Date one object
var d1 = new Date(x[0],(x[1]-1),x[2]);
//  // Set Date two object
var d2 = new Date(y[0],(y[1]-1),y[2]);
//  
//  //Calculate difference
diff = Math.ceil((d2.getTime()-d1.getTime())/(d));

//Show difference
document.getElementById(names[i]).value = diff;

}
}

function interval() {
var int = setInterval(function(){daysBetween()},500);
}

The list of arrays at the beginning is the names of the elements which I need to access. What I intend to do with my function is on each interval run through a loop which checks all 8 of these elements. namestart[] and namend[] are the start and end dates entered by the user. names[] lists the names of the boxes where days are to be displayed.

I have not been able to even test the interval portion because I can’t even get the daysBetween() to run once with manually assigned value=”date” for testing purposes, it just won’t run at all.

The issue is quite simple really: document.getElementById(namestart[i]).value isn’t pullig out a value, it just hangs the script because it can’t find the value. I have also tried using the form_name.elements().value notation and the form_name.element_name.value notation to no avail.

I am really stumped here as far as I can tell the code should be working, I give a list of the names of the items and I tell the script to access them using – what I have used, and seen many times to work getElementByID.

Any assistance would be greatly appreciated as I am not quite sure where to go from here.

As requested here is a JS fiddle link: http://jsfiddle.net/L2H9N/ – pure JS no libraries.

Answer 1

What I think is happening is your daysBetween function is executing before the DOM is ready, which is throwing an error and nuking the rest of your javascript. To fix it, you’ll need to put the call to daysBetween into a callback for window.onload or attach it to a callback in your calender.

It would also be a good idea to coalesce your nulls or at least check for them before proceeding to do calculations on the variables.