I am trying to calculate Total based on what checkbox is checked.
If other is checked, then you should be able to type in Other Amount and it should calculate total. Problem i am facing is that when other option is checked i am still able to type in Other Amount and it will effect Total.
Question first: How can i clear other amount field after "Other" was checked and unchecked after?
Second problem i have is: when qty line is checked i want to multiply qty times 500 and send it to total.
I can only use JavaScript.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function updatesum() {
document.epayform.sum.value = (document.epayform.total.value - 0) + (document.epayform.sum2.value - 0);
}
</script>
</head>
<body>
<div class="container">
<form name="epayform" action="[UMformURL]" method="POST" autocomplete="off">
<div class="row">
<div class="row" style="margin-top:15px">
<fieldset>
<legend>Options</legend>
<label class="inputr">
<input onclick="clickCh(this)" class="chk" type="checkbox" onChange="updatesum()" name="twelve" value="500" />
</label>
<label class="rates">qty <select name="ppl">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select> at $500</label>
<br />
<label class="inputr">
<input onclick="clickCh(this)" class="chk" type="checkbox" name="thirteen" value="10000" />
</label>
<label class="rates">$10,000 </label>
<br />
<label class="inputr">
<input onclick="clickCh(this)" class="chk" type="checkbox" name="sixteen" value="0" />
</label>
<label class="rates">Other</label>
<br />
<label class="inputr">
<input onclick="clickCh(this)" class="chk" type="checkbox" name="seventeen" value="7500" />
</label>
<label class="rates">$7,500 </label>
<fieldset><label style="color:#F5C440;"><b>Subtotal:</b></label><input id="total" name="total" readonly oninput="updatesum()"/></fieldset>
<fieldset><label style="color:#F5C440;"><b>Other Amount:</b></label><input name="sum2" onChange="updatesum()" value="" width="50px"/></fieldset>
<fieldset><label style="color:#F5C440;"><b>Total:</b></label><input name="UMamount" id="sum"/></fieldset>
<br />
</fieldset>
</div>
<br />
<div class="processbutton" style="margin:0 15px; padding:3px">
<input id="button" type="submit" value="Process Payment" name="submitbutton">
</div>
</form>
</div>
</div>
<script>
function clickCh(obj) {
var cbs = document.getElementsByClassName("chk");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = false;
console.log("he");
}
document.epayform.sum2.value = "0";
obj.checked = true;
document.getElementById("total").value = obj.value;
updatesum()
}
</script>
</body>
Aucun commentaire:
Enregistrer un commentaire