Javascript + Berekenen vanuit formuliervelden

[Ruultje]

Is het mogelijk om vanuit Javascript ervoor te zorgen dat twee formuliervelden (Form) bij elkaar geteld worden. Of beter gezegd: zij een verschil berekenen.

Het zit zo. Ik heb een database. Via een form worden de gegevens toegevoegd aan de database. In die database staan begin- en einduren. Via een php code zorg ik ervoor dat de beginuren (zijn de einduren van de vorige dienst) automatisch berekend worden. Hierdoor hoeft men alleen de einduren nog in te vullen (werk). Nu is het zo dat men per dag 8 uur moet hebben gewerkt. Dus einduur - beginuur van die dag moet altijd 8 zijn.

Maar nu stel dat het verschil maar 6 uur is ipv 8 uur. Dan moet er een reden worden opgegeven waarom er maar 6 uur gewerkt is ipv 8. Wanneer dit het geval is moet er een extra inputveld komen waarin men de reden kan invullen waarom er maar 6 uur gewerkt is.

Nu wil ik deze functie inbouwen via Javascript (lijkt mij het meest logische). Weet iemand hoe ik dit het beste kan doen? Ik vind namelijk niets wat mij zou kunnen helpen. Maar misschien zoek ik met de verkeerde trefwoorden.

 

[That Guy]

je invoer voor begin/einduur:

<input type='text' id='beginuur' value='<?php echo $begin; ?>' />
                                              <!-- ofzo -->
<input type='text' id='einduur' />

het input veld dat, als het niet goed is, 'erbij' moet komen:

<input type='text' id='reden' style='display:none;' />

nu, bij je submit, ga je het eerst controleren:

<input type='submit' onclick='checkTijd();' />

de bijbehorende javascript code:
[JS]function checkTijd()
{
var begin = document.getElementById('beginuur').value;
var eind = document.getElementById('einduur').value;

var verschil = parseInt(eind) - parseInt(begin);

if(verschil < 8)
{
showExtraInput();
return false;
}
}

function showExtraInput()
{
var reden = document.getElementById('reden');
reden.style.display = (reden.style.display == 'none') ? 'block' : 'none';
}
[/JS]


Zoiets. Nu is dit wel uit het hoofd, dus foutjes kunnen ertussen staan. Ohja, trouwens, als iemand nu zn eind-tijd veranderd na iets fouts in gevoerd te hebben, blijft het 'reden' vakje wel staan.


:thumb:

 

[ErikBooy007]

Hmm, tijden van elkaar aftrekken is altijd een beetje tricky, vooral als de periode zich over meerdere dagen uitspreid. Het gaat altijd om hele uren? Dat scheelt namelijk weer een beetje.

Oké poging 1:

[JS]

function timeDiff () {

var begin = parseInt(document.getElementById('begin').value);
var eind = parseInt(document.getElementById('eind').value);

if ( eind < begin ) {
eind += 24;
}

var diff = eind - begin;

if ( diff < 8 ) {
document.getElementById('reden').style.visibility = "visible";
} else {
document.getElementById('reden').style.visibility = "hidden";
}

}
[/JS]

Hierbij moet je invoerveld met de begintijd id="begin", het veld met de eindtijd id="eind" en het veld met de reden id="reden" meekrijgen.

Het vel met de reden, moet ook nog style="visibility: hidden" meekrijgen, zodat het niet standaard zichtbaar is.

Vervolgens moeten eigenlijk allebeide velden nog een trigger krijgen:

onchange="timeDiff()"

voeg je dus toe aan de tijdvelden.

[EDIT]
Ik was al bezig met m'n verhaal toen Vegras postte...
[/EDIT]

 

[That Guy]

Erik's oplossing is best strak. Ik zal ook al aan de onchange van het veld te denken, maar ik ben even vergeten waarom ik dat juist niet had gedaan....

 

[Ruultje]

Bedankt beide. Hiermee is het gelukt!

Dat het veldje niet terugspringt nadat wel het aantal op 8 is gekomen is niet zo erg.

Ik heb die onchange uiteindelijk bij de velden gezet. Werk perfect.