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.
Link gekopieerd
Heb nu dit script:
<script type="text/javascript">
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?
Link gekopieerd
Dan moet je op de select de onchange event afvangen:
<?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();">
?>
Link gekopieerd
Ik zou hem zelf aan de keyup event hangen. En tevens even $('#totaal') uit de event callback halen en in een globale variabele plaatsen.
Link gekopieerd
In deze situatie is de keyup het beste, maar ik zou dat in ieder geval nooit doen met een AJAX call.
Link gekopieerd
<?php
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.
Link gekopieerd
probeer dit eens uit en dan in jouw code te integreren
<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>
Link gekopieerd