Combining two javascript functions to calculate form

Question

I have a form that calculates the time between two dates, and stores 6 numeric fields.

I wnat to be ale to have the form claculate these values as the user starts selecting after the two dates so that the form works as intended.

A sample page is located here..of what my intentions are

http://jsfiddle.net/GfN5u/1/ the js is withing the html

I feel i'm almost there but lifes not fair to me this week.

Also in IE 8 the select elements lose their content.....even in jsfiddle.

Any help would be appreciated.

Thank you

        <script>
        var txt1 = document.Edit.StartTime.value
        var txt2 = document.Edit.EndTime.value

        var differenceInSeconds = (Calendar.parseDate(txt2, false).getTime() - Calendar.parseDate(txt1, false).getTime())/1000;
        var val9 = differenceInSeconds/60.0/60
        alert(val9)
        </script>


            <script>
        re=/\D/g

        function getGoodVal(fld) {
        var val = fld.value;
        if (!val) val=0;
        if (isNaN(val)) {
        val=val.replace(re,""); // remove all nonDigits
        }
        if (val=="" || isNaN(val)) val = 0; // still not a number or empty
        val = parseFloat(val)
        fld.value=val.toFixed(2);
        return val;
        }

        function calc(theForm) {
        var val10 = val9
        var valb = getGoodVal(theForm.lunch);   
        var val1 = getGoodVal(theForm.TRDO);
        var val2 = getGoodVal(theForm.AnnualLeave);
        var val3 = getGoodVal(theForm.PersonalLeave);
        var val4 = getGoodVal(theForm.WorkFromHome);
        var val5 = getGoodVal(theForm.TOIL); 

        total = (val9-valb) + (val1+val2+val3+val4+val5);
        theForm.total.value=total.toFixed(2)
        }
        </script>   

Answer 1

To calculate the values as the user selects dates, link your calculation to some javascript event that is called after a date is selected. I noticed that you attempted to link your calc() function to the onChange event of the text inputs, which does not work. You can link the calc() function to the onSelect property of Calendar.setup. It will look something like this:

  Calendar.setup({
    inputField : "StartTime",
    trigger    : "f_btn1",
    onSelect   : function() { this.hide(); calc(document.forms[0]); },
    showTime   : 12,
    dateFormat : "%Y-%m-%d %I:%M %p"
  });

Notice that calc() is called just like the onChange property of the input element. However, the reference to the form changes because the form is not part of the Calendar scope: document.forms[0].

It would probably be helpful to your users to have a function that verifies that updates the end time so that it cannot be earlier than the start time.