I need some help. This is my full working code for an order form.
Currently, if i add to the “Number of licences”, the prices don´t get updated, unless i re-click the radio buttons.
I´d like to be able to get an updated price when i click the “+” and “-” buttons.
But how?
<form name="cart" id="cart" action="submit.php" method="get" >
<div id="input1.ogt">
<input name="RB1" type="radio" value="1" checked onclick="CheckChoice1();"> Standard Version - $25 / mth + VAT; $129 / yr + VAT
</div>
<div id="input2.ogt">
<input name="RB1" type="radio" value="2" onclick="CheckChoice2();">Expanded Version - $39 / mth + VAT; $199 / yr + VAT
</div>
<div id="input3.ogt">
<input name="RB2" type="radio" value="3" data-cost="0" onclick="CheckChoice3();" checked>Yearly
</div>
<div id="input4.ogt">
<input name="RB2" type="radio" value="4" data-cost="0" onclick="CheckChoice4();">Monthly
</div>
<p>Number of licences:
<div id="quantityselection.ogt"><span style="font-size:11px; margin-left:25px;"><input type="button" value=" - " onclick="if(this.form.Users.value>1) this.form.Users.value--;this.form.total.value=CheckChoice(5);" style="font-weight:bold;background:#CCC;"> <input type="text" name="Users" id="Users" value="1" min="1" onchange="this.form.total.value=CheckChoice(5);" style="width:30px;font-weight:bold;"> <input type="button" value=" + " onclick="this.form.Users.value++;this.form.total.value=CheckChoice(5);" style="font-weight:bold; background:#CCC;"></span><span style="font-size:11px; margin-left:25px;"><br></span></div>
<div id="input5.ogt"><input type="text" id="higher" value="1" hidden></div>
<div id="input6.ogt"><input type="text" id="lower" value="3" hidden></div>
<div id="totalprice.ogt">
<p>Before VAT: 129,00 EUR
<input type="text" id="summa" value="129" hidden="hidden" />
<br>
VAT 25,80 EUR
<input type="text" id="km" value="25,80" hidden="hidden" />
<br>
TOTAL: 154,80 EUR
<input type="text" id="kokku" value="154,80" hidden="hidden" />
<input type="text" id="hind" value="129" hidden="hidden" />
</p>
</div>
<p> </p>
<p> </p>
<p><br />
<br />
<input type="submit" name="button" id="button" value="Submit" />
</p>
</form>
<p> </p>
<p> </p>
<script type="text/javascript">
function CheckChoice1()
{
var ogt5 = document.getElementById('input5.ogt');
ogt5.innerHTML = '<input type="text" name="higher" id="higher" value="1" hidden>';
var totalprice = document.getElementById('totalprice.ogt');
if (document.cart.lower.value == 3)
var hind = 129 * document.cart.Users.value;
if (document.cart.lower.value == 4)
var hind = 25 * document.cart.Users.value;
totalprice.innerHTML = 'Before VAT: ' + parseFloat(hind).toFixed(2) + ' EUR<br><input type="text" name="summa" value="'+hind+'" hidden>'
+ 'VAT: ' + parseFloat(hind*0.2).toFixed(2) + ' EUR<input type="text" name="km" value="'+hind*0.2+'" hidden><br>'
+ 'TOTAL: ' + parseFloat(hind*1.2).toFixed(2)+ ' EUR<input type="text" name="kokku" value="'+hind*1.2+'" hidden><br>'
+ '<input type="text" name="hind" value="'+hind+'" hidden>';
}
function CheckChoice2()
{
var ogt5 = document.getElementById('input5.ogt');
ogt5.innerHTML = '<input type="text" name="higher" id="higher" value="2" hidden>';
var totalprice = document.getElementById('totalprice.ogt');
if (document.cart.lower.value == 3)
var hind = 199 * document.cart.Users.value;
if (document.cart.lower.value == 4)
var hind = 39 * document.cart.Users.value;
<!-- Järgnevad 5 rida on copy/paste CheckChoice1()-st -->
totalprice.innerHTML = 'Before VAT: ' + parseFloat(hind).toFixed(2) + ' EUR<br><input type="text" name="summa" value="'+hind+'" hidden>'
+ 'VAT: ' + parseFloat(hind*0.2).toFixed(2) + ' EUR<input type="text" name="km" value="'+hind*0.2+'" hidden><br>'
+ 'TOTAL: ' + parseFloat(hind*1.2).toFixed(2)+ ' EUR<input type="text" name="kokku" value="'+hind*1.2+'" hidden><br>'
+ '<input type="text" name="hind" value="'+hind+'" hidden>';
}
function CheckChoice3()
{
var ogt6 = document.getElementById('input6.ogt');
ogt6.innerHTML = '<input type="text" name="lower" id="lower" value="3" hidden>';
var totalprice = document.getElementById('totalprice.ogt');
if (document.cart.higher.value == 1)
var hind = 129 * document.cart.Users.value;
if (document.cart.higher.value == 2)
var hind = 199 * document.cart.Users.value;
totalprice.innerHTML = 'Before VAT: ' + parseFloat(hind).toFixed(2) + ' EUR<br><input type="text" name="summa" value="'+hind+'" hidden>'
+ 'VAT: ' + parseFloat(hind*0.2).toFixed(2) + ' EUR<input type="text" name="km" value="'+hind*0.2+'" hidden><br>'
+ 'TOTAL: ' + parseFloat(hind*1.2).toFixed(2)+ ' EUR<input type="text" name="kokku" value="'+hind*1.2+'" hidden><br>'
+ '<input type="text" name="hind" value="'+hind+'" hidden>';
}
function CheckChoice4()
{
var ogt6 = document.getElementById('input6.ogt');
ogt6.innerHTML = '<input type="text" name="lower" id="lower" value="4" hidden>';
var totalprice = document.getElementById('totalprice.ogt');
if (document.cart.higher.value == 1)
var hind = 25 * document.cart.Users.value;
if (document.cart.higher.value == 2)
var hind = 39 * document.cart.Users.value;
totalprice.innerHTML = 'Before VAT: ' + parseFloat(hind).toFixed(2) + ' EUR<br><input type="text" name="summa" value="'+hind+'" hidden>'
+ 'VAT: ' + parseFloat(hind*0.2).toFixed(2) + ' EUR<input type="text" name="km" value="'+hind*0.2+'" hidden><br>'
+ 'TOTAL: ' + parseFloat(hind*1.2).toFixed(2)+ ' EUR<input type="text" name="kokku" value="'+hind*1.2+'" hidden><br>'
+ '<input type="text" name="hind" value="'+hind+'" hidden>';
}
function CheckChoice5()
{
var totalprice = document.getElementById('totalprice.ogt');
var hind = document.cart.Users.value*document.cart.hind.value;
totalprice.innerHTML = 'Before VAT: ' + parseFloat(hind).toFixed(2) + ' EUR<br><input type="text" name="summa" value="'+hind+'" hidden>' + 'VAT: ' + parseFloat(hind*0.2).toFixed(2) + ' EUR<input type="text" name="km" value="'+hind*0.2+'" hidden><br>' + 'TOTAL: ' + parseFloat(hind*1.2).toFixed(2)+ ' EUR<input type="text" name="kokku" value="'+hind*1.2+'" hidden><br>' + '<input type="text" name="hind" value="'+hind+'" hidden>';
}
</script>
There is a Typo in your code which is causing the function not to get called.
Change the occurrences of text
CheckChoice(5)toCheckChoice5()and that should do the trick.