Hi,
I am working on a php form where, I have 5 rate , 5 quantity & 5 amount fields. The user will make entry on amount & quantity fields, and onchange the amount fields will be calculated, I also have a TOTAL field which will also be calculated from the amount fields.
rate * quantity = amount
amount + amount = total
I am unable to create the JS and use them.
Jump to PostCould you show me your HTML? It depends on how you construct your HTML. Also, do you use JQuery library or just raw JavaScript?
Could you show me your HTML? It depends on how you construct your HTML. Also, do you use JQuery library or just raw JavaScript?
rough code to give you idea of what you could do:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function updateValues() {
rate1 = document.getElementById("rate1").value;
rate2 = document.getElementById("rate2").value;
rate3 = document.getElementById("rate3").value;
quantity1 = document.getElementById("quantity1").value;
quantity2 = document.getElementById("quantity2").value;
quantity3 = document.getElementById("quantity3").value;
document.getElementById("amount1").innerHTML = rate1 * quantity1;
document.getElementById("amount2").innerHTML = rate2 * quantity2;
document.getElementById("amount3").innerHTML = rate3 * quantity3;
document.getElementById("total").innerHTML = (rate1*quantity1) + (rate2*quantity2) + (rate3*quantity3)
}
</script>
</head>
<body>
<input type="text" id="rate1" /> * <input type="text" id="quantity1" onChange="updateValues();" /> = <span id="amount1" style="border: 2px solid black;padding:2px;"></span><br /><br />
<input type="text" id="rate2" /> * <input type="text" id="quantity2" onChange="updateValues();" /> = <span id="amount2" style="border: 2px solid black;padding:2px;"></span><br /><br />
<input type="text" id="rate3" /> * <input type="text" id="quantity3" onChange="updateValues();" /> = <span id="amount3" style="border: 2px solid black;padding:2px;"></span><br /><br />
Total: <span id="total" style="border: 2px solid black;padding:2px;"></span>
</body>
</html>Thanks to all. I was just looking for the this.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.