JSFiddle - React, Tailwind, and code Playground
HTML
<form class="order" method="post" action="/">
<input type="hidden" id="prijs" name="prijs" value="15.25" />
<input type="hidden" id="kosten" name="kosten" value="5.00" />
<input type="hidden" id="korting" name="korting" value="0.00" />
<input type="text" id="stuks" name="stuks" value="1" onchange="lol();" />
<label id="prijs_stuk">Stuk prijs<span>€ 15.25</span></label>
<label>Verzendkosten<span id="prijs_verzendkosten">€ 5.00 </span></label>
<div id="prijs_overzicht">
<label id="prijs_korting_optie">Korting<span id="prijs_korting">€ 15,00</span></label>
<label>Totaal<span id="prijs_totaal">€ 15,00</span></label>
</div>
<input type="submit" name="actie_betalen" value="Bestellen" />
</form>
CSS
label { display: block; padding-left: 2px; padding-bottom: 5px; padding-right: 22px;}
label span { float: right; }
label .end { border-bottom: 1px solid #000; }
#prijs_stuk { display: block; }
#bestelform,
#prijs_overzicht,
#prijs_korting_optie { display: none; }
JavaScript
function lol() {
alert('lol' + $('#stuks').val());
if ($('#stuks').val() > 0) {
var stuks = parseInt($('#stuks').val(), 10);
var prijs = parseInt($('#prijs').val(), 10);
var kosten = parseInt($('#kosten').val(), 10);
var korting = parseInt($('#korting').val(), 10);
if ($('#stuks').val() > 10) {
alert('U kan niet meer dan 10 artikelen per keer bestellen, voor grote hoeveelheden neem a.u.b contact via het contact formulier op!');
$('#stuks').val(10);
}
totaalPrijs = stuks * prijs;
alert('1' + stuks * prijs);
totaalPrijs = totaalPrijs + kosten;
alert('2' + (stuks * prijs) + kosten);
totaalPrijs = totaalPrijs - korting;
alert(totaalPrijs);
$('#prijs_totaal').val("&euro " + totaalPrijs);
if ($('#korting').value > 0) {
$('#prijs_korting_optie').show();
$('#prijs_korting').html("&euro " + $('#korting').val());
}
$('#prijs_overzicht').show();
}
return false;
}