onfocus even in js not working?!!!

[jmahdi]

hi guys, below is a form to enter timesheet details into a database:

<form name="entries_form" method="post" action="index.php">
        <table>
    <tr>
	<th><label>Date</label></th>
	<th><label>From</label></th>
	<th><label>To</label></th>
	<th><label>Break</label></th>
	<th><label>Hours</label></th>
	<th><label>Required Hours</label></th>
	<th><label>Notes</label></th>
    </tr>
    <tr>
	<td>
	    <input name="Date" type="text id="Date" value="<?php
	    echo strftime("%d/%m/%Y", time());
	    ?>" />
	</td>
	<td>    
	<input name="From" type="text" id="From" />
	</td>
	<td>
	    <input name="To" type="text" id="To" />
	</td>
	<td>
	    <input name="Break" type="text" id="Break" />
	</td>
	<td>
	    
	    <input name="Hours" type="text" id="Hours" onfocus="return calc_time();" />
	</td>
	<td>
	    
	    <input name="Rqrd_hrs" type="text" id="Rqrd_hrs" value="8" />
	</td>
	<td>
	    
	    <input name="Notes" type="text" id="Notes" />
	</td>
	<td>
	    <input type="submit" name="submit" value="Save" id="Save" style="background-color:#7A70A4;" />
	</td>
    </tr>
</table>
    </form>

 

the onfocus event is pointing to this method:

function calc_time(){
var time_start = document.entries_form.From.value;
var time_end = document.entries_form.To.value;
var t_break = document.entries_form.Break.value;
var hours = document.entries_form.Hours.value;
var t_time;

s = time_start.split(':');
e = time_end.split(':');
b = t_break.split(':');
    
min = e[1]-s[1]-b[1];
hour_carry = 0;

if(min < 0){
    min += 60;
    hour_carry += 1;
}
if(e[0] < s[0]){//if end hour is less than start hour
  //convert to 24hr format 	
  twnty4Form = parseInt(e[0]) + 12;
  hour = twnty4Form-s[0]-b[0]-hour_carry;
}else{
hour = e[0]-s[0]-b[0]-hour_carry; 
}
 return t_time = hour + ":" + min;
}

 

the problem is that when i -focus- on the field with id (Hours), i dont get the output of t_time which is supposed to be the total time after all calculations in the field, as i am intending to....what am i doing wrong any help or suggestions.

 

thanks in advance

[gizmola]

Where is the rest of the code? I'm guessing you want to hook onto onkeypress.

 

Here's a jsfiddle with a few adjustments that also illustrates where you have issues with your code.  Hopefully it will put you on the right track:  http://jsfiddle.net/Bf4S7/15/

[jmahdi]

Where is the rest of the code? I'm guessing you want to hook onto onkeypress.

 

Here's a jsfiddle with a few adjustments that also illustrates where you have issues with your code.  Hopefully it will put you on the right track:  http://jsfiddle.net/Bf4S7/15/

 

thanks gizmola, onkeypress doesnt seem to work either, actually i had tried using w3schools try it yourself displaying an alert box based on inputs and it alerts the correct time, so i'm not sure why isn't the in focus work...

[gizmola]

It does work, that is why I provided the jsfiddle.  Did you look at it? 

 

I started with your code and made adjustments, but the adjustments are important ones. 

 

The main thing I omitted was the php string, but that can be re-added without consequence.

 

I added an event listener to the entire form, so that changes in any of the fields start the calculation.  You will see that there are issues with the minutes code that produces NAN problems with the minutes values.

 

 

 

[jmahdi]

It does work, that is why I provided the jsfiddle.  Did you look at it? 

 

I started with your code and made adjustments, but the adjustments are important ones. 

 

The main thing I omitted was the php string, but that can be re-added without consequence.

 

I added an event listener to the entire form, so that changes in any of the fields start the calculation.  You will see that there are issues with the minutes code that produces NAN problems with the minutes values.

 

i tried issuing an alert box onclclick before and it works fine with calculations, but when using on keypress I don't know why its giving wrong output???