waarde berekenen en in form inputveld tonen
Ik ben in mijn php pagina bezig met een form met o.a. 3 input regels:
KM-vertrek: <input type="text" name="KM1" />
KM-aankomst: <input type="text" name="KM2" />
KM-retour: <input type="text" name="KM3" />
Zodra KM1 en KM2 gevuld zijn moet KM3 alvast uitgerekend en getoond worden (KM3 = KM2 + (KM2-KM1)). Dit is immers de meest waarschijnlijke waarde en hoe minder invoerwerk, hoe gebruiksvriendelijker. Zonodig moet KM3 wel aangepast kunnen worden, dus het invoerveld moet wel beschikbaar en zichtbaar blijven.
Het gaat er niet om hoe ik KM1 enz. kan posten naar een PHP pagina, dat lukt allemaal prima. Maar hoe ververs ik de waarde van het KM3 veld met de berekende waarde?
Groeten, Gerrit
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
$('#KM1, #KM2').change(setRetour);
$('#KM1, #KM2').keyup(setRetour);
});
function setRetour(e) { // wanneer een toets in
var km1 = Number($('#KM1').val());
var km2 = Number($('#KM2').val());
if (isNaN(km1) || isNaN(km2)) { // indien vertrek of aankomst geen nummer is => retour niet berekenen
return true;
}
$('#KM3').val(km2 + (km2-km1));
}
</script>
</head>
<body>
KM-vertrek: <input type="text" id="KM1" name="KM1"/><br/>
KM-aankomst: <input type="text" id="KM2" name="KM2"/><br/>
KM-retour: <input type="text" id="KM3" name="KM3"/><br/>
</body>
</html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
$('#KM1, #KM2').change(setRetour);
$('#KM1, #KM2').keyup(setRetour);
});
function setRetour(e) { // wanneer een toets in
var km1 = Number($('#KM1').val());
var km2 = Number($('#KM2').val());
if (isNaN(km1) || isNaN(km2)) { // indien vertrek of aankomst geen nummer is => retour niet berekenen
return true;
}
$('#KM3').val(km2 + (km2-km1));
}
</script>
</head>
<body>
KM-vertrek: <input type="text" id="KM1" name="KM1"/><br/>
KM-aankomst: <input type="text" id="KM2" name="KM2"/><br/>
KM-retour: <input type="text" id="KM3" name="KM3"/><br/>
</body>
</html>
Dit is javascript met jQuery. In dit geval is jQuery gehost door Google (kan je zelf aanpassen).
Gewijzigd op 03/02/2012 09:19:34 door Kris Peeters
Dank voor jullie oplossingen. Ik zal kijken wat het beste past en kan hier zeker mee verder. jQuery heb ik ook al in gebruik voor een datum en tijdpicker.
Groeten, Gerrit
Je moet dat wel initiëren als de pagina geladen is.
Dat kan bv. zo:
in je HTML:
<body onload="init()">
in javascript
Code (php)
1
2
3
2
3
function init() {
// en dan hier de volledige javascript code van Wouter
}
// en dan hier de volledige javascript code van Wouter
}