Automatisch optellen script js
ik heb nu dit script je gevonden op internet maar ik heb er een vraagje over. Ik ben nou niet echt geweldig met js dus kan iemand mij uitleggen wat er gebeurd vanaf $form.delegate? En dan bedoel ik van wat al die functies doen en wat het gevolg er van is.
Alvast bedankt!
HTML:
<form id="missies">
<label>This one is used: <input class="getal"/></label>
<br/>
<label>So is this one: <select class="getal">
<option>5</option>
<option>10</option>
<option>15</option>
</select></label>
<br/>
<label>This one is ignored: <input class="ignore"/></label>
<br/><br/>
<p>Total: <span id="kans"/></p>
</form>
JS:
var $form = $('#missies'),
$getallen = $form.find('.getal'),
$sumDisplay = $('#kans');
$form.delegate('.getal', 'change', function ()
{
var sum = 0;
$getallen.each(function ()
{
var value = Number($(this).val());
if (!isNaN(value)) sum += value;
});
$sumDisplay.text(sum);
});
Deze regel definieert een eventhandler voor alle elementen met de class 'getal', voor het event 'change'. Dus elke keer dat een element met die class verandert wordt de callback functie aangeroepen.
$getallen.each(function ()
Dit is een loop (als de php foreach loop) die door alle element in de array $getallen gaat. voor elk element in de array wordt de callback functie aangeroepen.
var value = Number($(this).val());
De variabele value krijgt de waarde van het huidige element in de each loop.
if (!isNaN(value)) sum += value;
Als value nu een getal is (isNaN staat voor 'is Not a Number en geeft true als het geen getal is), dan wordt de waarde opgeteld bij sum.
$sumDisplay.text(sum);
sum wordt in het element $sumDisplay geplaatst. Dat is het element met de id 'kans'.
Ik hoop dat dit een beetje duidelijk is.
Gewijzigd op 06/06/2012 20:06:11 door Erwin H
<td><input type="text" name="soldaat" class="getal" size="5" /></td>
<td><input type="text" name="antitank" class="getal" size="5" /></td>
<td><input type="text" name="humvee" class="getal" size="5" /></td>
<td><input type="text" name="tank" class="getal" size="5" /></td>
<td><input type="text" name="heli" class="getal" size="5" /></td>
<td><input type="text" name="vliegtuig" class="getal" size="5" /></td>
<td colspan="2">Kans: <span id="kans"/>%</td>
Nu wil ik zeg maar de 'sum' bereken door middel van een php functie die gebruik maakt van $(zie names in <input> oftewel 6 stuks). Ik neem aan dat ik van de name een var moet maken maar wat kan ik nu van de js code weglaten en waar moet ik die php functie neerzetten?
js = browser
Als je alles al in php doet kan je dus de hele js weglaten.
Mike dede op 06/06/2012 20:59:45:
Nu wil ik zeg maar de 'sum' bereken door middel van een php functie
Mike dede op 06/06/2012 21:34:05:
ik wil dat die sum direct weergeven wordt als je die velden invult net zoals dat in dat js script gebeurt (dus zonder knopje/link enz.) en dat kan toch niet in php?
Wat wil je nu? Misschien iets beter uitleggen, want eerst wil je het met een php functie, en dan weer niet.
Dus bedenk eerst of je het server side kan doen. Zo nee, dan zal het dus helemaal in js moeten.
Erwin H op 07/06/2012 09:24:00:
Je kan geen php en js mixen. Dus 'variabelen uit mijn php' in js gebruiken gaat niet lukken!
Opzich klopt deze opmerking, maar voor de duidelijkheid je kan wel de waardes van de variabelen gebruiken als value voor javascript. Dus stel je voor je haalt in je php een percentage uit de database en zet deze in $iPercentage dan kan je deze wel gebruiken in javascript door te zeggen:
Code (php)
1
2
3
2
3
var doehierietsmee("<?=$iPercentage?>");
// even heel simpel:
alert(doehierietsmee);
// even heel simpel:
alert(doehierietsmee);
Gewijzigd op 07/06/2012 09:47:03 door gerhard l