form field values displayed on the fly

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • cptuser
    New Member
    • Mar 2007
    • 30

    form field values displayed on the fly

    Hi,
    I'm very new to javascript and have very little background knowledge. For some reason I can't get the script to work. It uses IF statements but for some starnge reason, it skips and ignore the variable?? named "total" and hence the IF statements don't work.

    I have a onChange handler on the tmsht_mon_out field, which I'm hoping would correctly display the values for the other fields based on the IF statements.

    This is for a timesheet, in which the user enters the time they come in and they time they go out, and then the total hours are computed. Anything over 8 hours goes into time and half (time_mon_oneha lf) and anything over 3 hours in time_mon_onehal f (or 11 hours total) will go into tmsht_mon_doubl e.

    Hope someone could help me!.. please.

    [CODE=javascript]
    <script type="text/javascript">
    function overtime() {

    var t1 = document.getEle mentById("tmsht _mon_out").valu e
    var t2 = document.getEle mentById("tmsht _mon_in").value ;
    var m = (t1.substring(0 ,t1.indexOf(':' ))-0) * 60 + (t1.substring(t 1.indexOf(':')+ 1,t1.length)-0) - (t2.substring(0 ,t2.indexOf(':' ))-0) * 60 + (t2.substring(t 2.indexOf(':')+ 1,t2.length)-0);
    var h = Math.floor(m / 60);
    var total = (h + ':' + (m - (h * 60)));
    document.getEle mentById("tmsht _mon_total").va lue = total;


    if (total <= 11)
    {
    document.getEle mentById("tmsht _mon_ord").valu e = 8;
    document.getEle mentById("time_ mon_onehalf").v alue = (total - 8).toFixed(2);
    }

    else if (total > 11.0)
    {
    document.getEle mentById("tmsht _mon_ord").valu e = 8;
    document.getEle mentById("time_ mon_onehalf").v alue = 3;
    document.getEle mentById("tmsht _mon_double").v alue = (total - 11).toFixed(2);
    }

    else
    {
    document.getEle mentById("tmsht _mon_total").va lue = total;
    document.getEle mentById("tmsht _mon_ord").valu e='';
    document.getEle mentById("time_ mon_onehalf").v alue='';
    document.getEle mentById("tmsht _mon_double").v alue ='';
    }
    }
    </script>
    [/CODE]
    Last edited by gits; Sep 12 '07, 12:59 PM. Reason: fix code tags
  • dmjpro
    Top Contributor
    • Jan 2007
    • 2476

    #2
    Originally posted by cptuser
    Hi,
    I'm very new to javascript and have very little background knowledge. For some reason I can't get the script to work. It uses IF statements but for some starnge reason, it skips and ignore the variable?? named "total" and hence the IF statements don't work.

    I have a onChange handler on the tmsht_mon_out field, which I'm hoping would correctly display the values for the other fields based on the IF statements.

    This is for a timesheet, in which the user enters the time they come in and they time they go out, and then the total hours are computed. Anything over 8 hours goes into time and half (time_mon_oneha lf) and anything over 3 hours in time_mon_onehal f (or 11 hours total) will go into tmsht_mon_doubl e.

    Hope someone could help me!.. please.

    Code:
    <script type="text/javascript">
    function overtime() {
    
    var t1 = document.getElementById("tmsht_mon_out").value
    var t2 = document.getElementById("tmsht_mon_in").value;
    var m = (t1.substring(0,t1.indexOf(':'))-0) * 60 + (t1.substring(t1.indexOf(':')+1,t1.length)-0) - (t2.substring(0,t2.indexOf(':'))-0) * 60 + (t2.substring(t2.indexOf(':')+1,t2.length)-0);
    var h = Math.floor(m / 60);
    var total = (h + ':' + (m - (h * 60)));
    document.getElementById("tmsht_mon_total").value = total;
    
    
    	if (total <= 11)
    	{
    	document.getElementById("tmsht_mon_ord").value = 8;
    	document.getElementById("time_mon_onehalf").value = (total - 8).toFixed(2);
    	}	
    	
    	else if (total > 11.0)
    	{
    	document.getElementById("tmsht_mon_ord").value = 8;
    	document.getElementById("time_mon_onehalf").value = 3;
    	document.getElementById("tmsht_mon_double").value = (total - 11).toFixed(2);
    	}
    
    	else
    	{
    	document.getElementById("tmsht_mon_total").value = total;
    	document.getElementById("tmsht_mon_ord").value='';
    	document.getElementById("time_mon_onehalf").value='';
    	document.getElementById("tmsht_mon_double").value ='';
    	}
    }
    </script>
    Look at this line very carefully.
    [code=javascript]
    var total = (h + ':' + (m - (h * 60)));
    //You r adding : this ...why?
    //Here h and m should be all number.
    //And the corrected line should be............. !
    var total = (h + (m - (h * 60)));
    [/code]
    Try this one.
    It will work.

    Kind regards,
    Dmjpro.

    Comment

    • cptuser
      New Member
      • Mar 2007
      • 30

      #3
      Thanks very much for your reply. It seems to have worked, however i just discovered that ":" is needed to properly calculate the time difference i.e. how many minutes between 09:00 and 09:23, if we don't have the ":" it will show just as '23', which would mean 23 hours.

      Is there a better way.. better function... for calculating the total time between two times (tmsht_mon_in) & (tmsht_mon_out) ? For example, if there is a 30min diference then in the tmsht_mon_total field would display '0.50' (which is 30/60) and if there is a 7 hours and 20 minutes difference then the tmsht_mon_total would display '7.33'.

      Comment

      • dmjpro
        Top Contributor
        • Jan 2007
        • 2476

        #4
        Originally posted by cptuser
        Thanks very much for your reply. It seems to have worked, however i just discovered that ":" is needed to properly calculate the time difference i.e. how many minutes between 09:00 and 09:23, if we don't have the ":" it will show just as '23', which would mean 23 hours.

        Is there a better way.. better function... for calculating the total time between two times (tmsht_mon_in) & (tmsht_mon_out) ? For example, if there is a 30min diference then in the tmsht_mon_total field would display '0.50' (which is 30/60) and if there is a 7 hours and 20 minutes difference then the tmsht_mon_total would display '7.33'.
        Ok!
        Now tell me what is the format of t1 and t2 and ultimately what you want to calculate with t1 and t2.
        Please tell specifically.

        Kind regards,
        Dmjpro.

        Comment

        • cptuser
          New Member
          • Mar 2007
          • 30

          #5
          Originally posted by dmjpro
          Ok!
          Now tell me what is the format of t1 and t2 and ultimately what you want to calculate with t1 and t2.
          Please tell specifically.

          Kind regards,
          Dmjpro.
          Hi Dmjpro,

          t1 is the time the user enters with they leave work, and t2 is the time they enter when they get into work, so for example, they get in at "09:00" (which is 9:00am) and they leave "17:30" (which is 5:30pm). So what I would like to do, is based on what the user enters as their time in and their time out, the 'total' value is the number of hours and minutes between the two times, but in numeric format, e.g. 8.5 hours (which is the difference between 17.30 and 09:00) and not '08:30'!

          I hope that makes sense.

          Comment

          • dmjpro
            Top Contributor
            • Jan 2007
            • 2476

            #6
            Originally posted by cptuser
            Hi Dmjpro,

            t1 is the time the user enters with they leave work, and t2 is the time they enter when they get into work, so for example, they get in at "09:00" (which is 9:00am) and they leave "17:30" (which is 5:30pm). So what I would like to do, is based on what the user enters as their time in and their time out, the 'total' value is the number of hours and minutes between the two times, but in numeric format, e.g. 8.5 hours (which is the difference between 17.30 and 09:00) and not '08:30'!

            I hope that makes sense.
            Ok!
            Test this code, it may help you.
            Good Luck.

            [code=html]
            <!--------------------------------
            I m assuming dat an user gets into with in 00.00 nd 24.00 nd also leavs with in 00.00 nd 24.00.
            ----------------------------------->
            <html>
            <head>
            <script language ="JavaScript ">
            function getTimeDiff()
            {
            try{
            var start_t = document.getEle mentById('start _time').value,
            end_t = document.getEle mentById('end_t ime').value;
            var h = start_t.substri ng(0,start_t.in dexOf(':')),
            m = start_t.substri ng(start_t.inde xOf(':')+1);
            start_t = parseFloat(h) + parseFloat(m)/60.0;
            h = end_t.substring (0,end_t.indexO f(':')),
            m = end_t.substring (end_t.indexOf( ':')+1);
            end_t = parseFloat(h) + parseFloat(m)/60.0;
            alert(start_t+" \t" + end_t);
            var total_t = end_t - start_t;
            document.getEle mentById('total _time').value = total_t;
            }catch(e){alert ("Error: " + e.description); }
            }
            </script>
            </head>
            <body>
            <input type = text id = "start_time ">
            <input type = text id = "end_time">
            <input type = text readonly id = "total_time ">
            <input type = button value = "Click Me" onclick = "getTimeDiff()" >
            </body>
            </html>
            [/code]

            Kind regards,
            Dmjpro.

            Comment

            Working...