Ajuda Formatação Campo Hora JavaScript

[Felipe Bergamini]

Boa tarde!

Sou novo no fórum, não possuo muitos conhecimentos de JavaScript, assim como também pesquisei e não consegui solucionar minha dúvida!

É o seguinte, tenho uma função em JavaScript que faz a soma/subtração de alguns campos de horário do meu formulário de cadastro de Ordem de Serviço.

function soma(){

document.getElementById("totalhoras").value = '0'

var horainicial = parseInt(document.getElementById("horainicial").value);

var horafinal = parseInt(document.getElementById("horafinal").value);

var horastraslado = parseInt(document.getElementById("horastraslado").value);

var horasoutros = parseInt(document.getElementById("horasoutros").value);

document.getElementById("totalhoras").value = horafinal - horainicial + horastraslado - horasoutros;

}

Até aqui tudo bem. O meu problema está na hora de mostrar esse total de horas na tela! Preciso que ele venha com o formato ##:##:## para que seja salvo desta forma em meu banco de dados! Até porque as horas mostradas na tela estão vindo do banco com esse formato, e algumas delas possuem minutos, o que não é mostrado na impressão dessa função!

Segue pedaço do formulário para melhor entendimento:

<tr>

<td align='right'>

<font face='verdana' size='2'>

Horas Traslado:

</td>

<td>

<input type='text' name='horastraslado' id='horastraslado' size='8' maxlength='8' value='".$dados['HorasTraslado']."' onchange=verifica_horas(this)' onkeypress='valida_horas(this, event)' onblur='soma()' readonly='true'> <font face='verdana' size='2'>(hh:mm:ss)</font>

</td>

</tr>

<tr>

<td align='right'>

<font face='verdana' size='2'>

Horas Outros:

</td>

<td>

<input type='text' name='horasoutros' id='horasoutros' size='8' maxlength='8' value='".$dados['HorasOutros]."' onchange='verifica_horas(this)' onkeypress='valida_horas(this, event)' onblur='soma()'> <font face='verdana' size='2' onblur='soma()'>(hh:mm:ss)</font>

</td>

</tr>

<tr>

<td align='right'>

<font face='verdana' size='2'>

Total de Horas:

</td>

<td>

<input type='text' name='totalhoras' id='totalhoras' size='8' maxlength='8'>

</td>

</tr>

Resumindo:

Atualmente está ocorrendo o seguinte, "20:30:00" menos "10:00:00" tenho como resultado 10:30:00 de projeto, porém o campo 'totalhoras' me traz apenas "10".

Lembrando é claro que minha página está em php!

Sei que é meio confuso, eu mesmo estou assim, mas agradeço muito quem puder me ajudar!

Editado Março 26, 2012 por Felipe Bergamini