[javascript] velden optellen als input check

[ViNyL]

Ik heb een hele rits met materialen die je kan bestellen, de velden zien er als volgt uit:

code:

<input onkeyup="checkField(this)"  name="productaantallen[1]" size="5" />
<input onkeyup="checkField(this)"  name="productaantallen[2]" size="5" />
<input onkeyup="checkField(this)"  name="productaantallen[3]" size="5" />

Het nummer tussen de blok haken is het product id.

Nu heb ik een functie in elkaar gezet welke de aantallen optelt in een hidden input en kijkt of dit groter als 0 (null) is. Is dit zo dan heb je iig iets besteld en kan je het form verzenden:

code:

function checkField(obj) {
if (isNaN(obj.value)) {
    alert("Nog geen product aantallen");
    obj.value = "";
} else {
if (obj.form.total.value == "") {
    obj.form.total.value = 0;
}
        
obj.form.total.value = obj.value == "" ? "" : parseInt(obj.form.total.value) + parseInt(obj.value);
}



// de totaal box:

<input name="total" readonly size="5" />

Wat ik nog niet helemaal werkend krijg is het volgende:

Als je bij een product een aantal opgeeft dan is het totaal keurig 1 of hoeveel je ook op heeft. Zodra je een tweede product erbij zet met aantallen, maar deze weer weghaalt is ook de totaal box in een keer leeg....
Hoe het zou moeten is:

Aantal in veld 1 is bv 10
Totaal is dan 10
Aantal in veld 2 is bv 4
Totaal is dan 14
Ik haal veld 2 weg van de order
Totaal is weer 10
etc

als ik nu dus veld 2 bv leeg maak dan is het totaal veld ook in een keer leeg en dus ook de waarde van veld 1...

Hoe doe je dit?

[ Voor 3% gewijzigd door ViNyL op 22-09-2006 15:32 ]

[user109731]

Het kan wel zo, maar dan moet je de oude waarde met de nieuwe vergelijken en dat verschil bij het totaal optellen. Maar volgens mij is het het handigste en het veiligste om in zo'n geval gewoon alles opnieuw op te tellen als de gebruiker wat wijzigt.

Dus zoiets:

HTML:

<script type="text/javascript">
function calcTotal() {
    var total = 0;
    var theForm = document.getElementById("theForm");
    var inputs = theForm.getElementsByTagName("input");
        
    for(var i=0; i<inputs.length; i++) {
      if (inputs[i].type == "text" && inputs[i].name.substr(0, 16) == "productaantallen") {
        total += parseInt(inputs[i].value ? inputs[i].value : 0);
      }
    }
    document.getElementById("total").value = total;
}
</script>

<form id="theForm">
  <input onkeyup="calcTotal()" name="productaantallen[1]" size="5">
  <input onkeyup="calcTotal()" name="productaantallen[2]" size="5">
  <input onkeyup="calcTotal()" name="productaantallen[3]" size="5">
  <input id="total">
</form>

Door enkel op zoek te gaan naar alle inputs binnen het goede form moet dit volgens mij redelijk snel gaan.

Hope this helps

[Michali]

Ik zou ook een onchange event op de input velden zetten. Je kunt de inhoud namelijk ook op andere manieren wijzigen.

Vergeet ook niet het type te zetten, die is verplicht dacht ik.
Dit is niet waar, volgens de w3c recommendation.

De methode van Grote Prutser is ook degene waar ik voor zou kiezen.

[ Voor 22% gewijzigd door Michali op 22-09-2006 16:20 ]

[ViNyL]

@Grote Prutser: Thanks, dit is inderdaad hoe ik het bedoel.Ik moet het iets aanpassen zodat het in mijn overkoepelende velden check kan, maar hier ben ik enorm mee geholpen.!

@ Michali: Dus inplaats van? Of beiden?

[Michali]

onchange wordt dacht ik alleen aangeroepen als er iets gewijzigd is en je blurred (het veld verliest zijn focus). Als je toch wilt dat total geupdate wordt als je typed, dan moet je onkeyup dus wel houden. Beide lijkt mij dus het beste.