Velden realtime optellen
Hallo,
Ik heb een formulier, en daarin 2 velden.
Veld 1 heet: vergoeding
Veld 2 heet: kliks
Dit moet keer elkaar gedaan worden, dus veld 1 X veld 2.
Dit moet dus ook realtime gebeuren.
Heb al gekeken op internet, en daar vindt ik allemaal brakke scriptjes.
Iemand die een idee heeft? Of me opweg wil helpen?
Groet Marvin
Ik heb een formulier, en daarin 2 velden.
Veld 1 heet: vergoeding
Veld 2 heet: kliks
Dit moet keer elkaar gedaan worden, dus veld 1 X veld 2.
Dit moet dus ook realtime gebeuren.
Heb al gekeken op internet, en daar vindt ik allemaal brakke scriptjes.
Iemand die een idee heeft? Of me opweg wil helpen?
Groet Marvin
Dit doe je met javascript.
eerst moet je een javascript variabele koppelen aan je formulierveld. Daarna kun je de waarden van de velden uitlezen, de waarden vermenigvuldigen en met een derde koppeling kun je een HTML element updaten en het resultaat laten zien.
eerst moet je een javascript variabele koppelen aan je formulierveld. Daarna kun je de waarden van de velden uitlezen, de waarden vermenigvuldigen en met een derde koppeling kun je een HTML element updaten en het resultaat laten zien.
Heb nu dit script:
Maar eigenlijk moet
document.getElementById('vergoeding').value
eerst nog gedeeld worden door 100. En dan moet wat daar uit komt,
document.getElementById('kliks').value (KEER) de uitkomst van de vorige som.
//
Het werkt nu, maar als ik iets verander in het veld kliks, gebeurt het realtime. maar verander ik wat in de selectbox dan telt het niet realtime op.
Hoe kan dat?
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<script type="text/javascript">
function reken()
{
totaal = document.getElementById('vergoeding').value * document.getElementById('kliks').value
document.getElementById('totaal').innerHTML = totaal
}
</script>
function reken()
{
totaal = document.getElementById('vergoeding').value * document.getElementById('kliks').value
document.getElementById('totaal').innerHTML = totaal
}
</script>
Maar eigenlijk moet
document.getElementById('vergoeding').value
eerst nog gedeeld worden door 100. En dan moet wat daar uit komt,
document.getElementById('kliks').value (KEER) de uitkomst van de vorige som.
//
Het werkt nu, maar als ik iets verander in het veld kliks, gebeurt het realtime. maar verander ik wat in de selectbox dan telt het niet realtime op.
Hoe kan dat?
Gewijzigd op 01/05/2013 14:15:12 door Marvin Guichelaar
Dan moet je op de select de onchange event afvangen:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php //voor de kleurtjes
function updateTotal(){
//JS
// totaal = document.getElementById('vergoeding').value * document.getElementById('kliks').value
// document.getElementById('totaal').innerHTML = totaal
//jquery
$("#totaal").html($("#vergoeding").val() * $("#kliks").val());
}
//jquery
$(document).ready(function() {
$("#vergoeding").bind("change", function() {
updateTotal();
});
$("#kliks").bind("change", function() {
updateTotal();
});
});
//html als je geen jquery gebruikt:
<select id="kliks" onchange="updateTotal();">
?>
function updateTotal(){
//JS
// totaal = document.getElementById('vergoeding').value * document.getElementById('kliks').value
// document.getElementById('totaal').innerHTML = totaal
//jquery
$("#totaal").html($("#vergoeding").val() * $("#kliks").val());
}
//jquery
$(document).ready(function() {
$("#vergoeding").bind("change", function() {
updateTotal();
});
$("#kliks").bind("change", function() {
updateTotal();
});
});
//html als je geen jquery gebruikt:
<select id="kliks" onchange="updateTotal();">
?>
Gewijzigd op 01/05/2013 18:41:57 door Ger van Steenderen
Ik zou hem zelf aan de keyup event hangen. En tevens even $('#totaal') uit de event callback halen en in een globale variabele plaatsen.
In deze situatie is de keyup het beste, maar ik zou dat in ieder geval nooit doen met een AJAX call.
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<?php
function reken()
{
henk = document.getElementById('vergoeding').value / 100
totaal = document.getElementById('kliks').value * henk
document.getElementById('totaal').innerHTML = totaal
}
?>
function reken()
{
henk = document.getElementById('vergoeding').value / 100
totaal = document.getElementById('kliks').value * henk
document.getElementById('totaal').innerHTML = totaal
}
?>
Heb zelf dit, en dan een onkey op het select veld en op het input veld, maar de input is wel realtime, maar de select niet.
Gewijzigd op 01/05/2013 21:52:19 door Marvin Guichelaar
probeer dit eens uit en dan in jouw code te integreren
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<script>
function myfunction(x) {
alert(x.options[x.selectedIndex].text + ' heeft value: ' + x.options[x.selectedIndex].value);
}
</script>
</head>
<body>
<select name="selectme" onChange="myfunction(this)">
<option value="1">keus1</option>
<option value="2">keus2</option>
<option value="3">keus3</option>
</select>
</body>
</html>
<head>
<script>
function myfunction(x) {
alert(x.options[x.selectedIndex].text + ' heeft value: ' + x.options[x.selectedIndex].value);
}
</script>
</head>
<body>
<select name="selectme" onChange="myfunction(this)">
<option value="1">keus1</option>
<option value="2">keus2</option>
<option value="3">keus3</option>
</select>
</body>
</html>




