FOK!forum / Digital Corner / Totaal berekenen variabele Javascript
Broodjekipkornzondag 8 april 2018 @ 21:01
Hi allemaal,

Ik ben bezig met het maken van een bestelformulier waarin je verschillende producten kunt bestellen. Deze worden uitgelezen uit een database m.b.v. een foreach. Allemaal hebben ze de volgende opstelling:

<select name="productid_qty" onchange="getProductsTotal(field)">
<option value="1">1</option>
<option value="2">2</option>
enz.
</select>
<input type="hidden" name="productid_price" value="<?php echo $product['price']; ?>">

Nu heb ik in Javascript de volgende code waarmee ik dus netjes de benodigde informatie per product kan uitlezen, maar nu wil ik eigenlijk daarvan dus een soort 'grande totaal'. Het is me alleen niet helemaal duidelijk hoe ik dat nu moet doen.

function getProductTotal(field) {
var form = field.form;
var product = field.name.slice(0, field.name.lastIndexOf("_"));
var price = form.elements[product + "_price"].value;
var qty = form.elements[product + "_qty"].value;
var amount = price * qty;
doTotal(form);
}

function doTotal(form) {
??
}

Kan iemand me even de juiste richting op sturen? Mijn Javascript kennis is helaas om te huilen.
ralfiezondag 8 april 2018 @ 21:19
Ik zou de prijs in een data-attribuut zetten van je select elementen. Dan wordt je javascript een stuk makkelijker:
1
2
3
4
5
6
7
8
9
<select class="orderinputs" name="productid" data-price=<?=$product['price'];?> onchange="getProductsTotal()">
<option value="1">1</option>
<option value="2">2</option>
enz.
</select>

//of simpeler, gebruik een input type=number

<input type="number" class="orderinputs" name="productid" data-price=<?=$product['price'];?> onchange="getProductsTotal()" value=0 min=0 max=10/>
met als javascript
1
2
3
4
5
6
7
8
function getProductsTotal() {
    let price = 0;    
    let orders = document.getElementsByClassName('orderinputs');
    for(let x in orders) {
        price += orders[x].getAttribute('data-price') * orders[x].value;
    }
    //doe iets met price
}
Broodjekipkornzondag 8 april 2018 @ 21:35
quote:
0s.gif Op zondag 8 april 2018 21:19 schreef ralfie het volgende:
Ik zou de prijs in een data-attribuut zetten van je select elementen. Dan wordt je javascript een stuk makkelijker:
[ code verwijderd ]

met als javascript
[ code verwijderd ]

Dankjewel voor de tip. Ik heb nu sowieso een input number type ervan gemaakt en de code toegevoegd, maar dan krijg ik de volgende melding:

orders[x].getAttribute is not a function

Edit: dat heb ik inmiddels opgelost, maar hij blijft helaas geen value ophalen. Er staat dan gewoon udefined, wanneer ik die probeer uit te lezen.

[ Bericht 9% gewijzigd door Broodjekipkorn op 09-04-2018 07:12:22 ]