We Keep Coding

Javascript to calculate input figures from form input

I am trying to create a javascript that calculates the sum of 4 amounts, that is generated from the input fields.
The problem is, I want the Total Invoice Value to start reflecting the value after the user has inputted the Rate 1 and Amount 1 has shown. But it doesnt happen until all the 4 amounts have been generated. The Total Invoice Value reflect only after I input the amount in Rate 4.
The complete code I am working with right now is:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="register" id="myForm" enctype="multipart/form-data" action="register" method="POST">
Qty 1:<input type="number" step="any" name="Qty1" autocomplete="off" id="Qty1" required><br>
Rate 1:<input type="number" step="any" name="Rate1" autocomplete="off" id="Rate1" class="rate" required><br>
Amount 1:<input readonly type="number" step="any" name="Amt1" autocomplete="off" id="Amt1" required><br><br>
Qty 2:<input type="number" step="any" name="Qty2" autocomplete="off" id="Qty2" required><br>
Rate 2:<input type="number" step="any" name="Rate2" autocomplete="off" id="Rate2" class="rate" required><br>
Amount 2:<input readonly type="number" step="any" name="Amt2" autocomplete="off" id="Amt2" required><br><br>
Qty 3:<input type="number" step="any" name="Qty3" autocomplete="off" id="Qty3" required><br>
Rate 3:<input type="number" step="any" name="Rate3" autocomplete="off" id="Rate3" class="rate" required><br>
Amount 3:<input readonly type="number" step="any" name="Amt3" autocomplete="off" id="Amt3" required><br><br>
Qty 4:<input type="number" step="any" name="Qty4" autocomplete="off" id="Qty4" required><br>
Rate 4:<input type="number" step="any" name="Rate4" autocomplete="off" id="Rate4" required><br>
Amount 4:<input readonly type="number" step="any" name="Amt4" autocomplete="off" id="Amt4" required><br><br>
Total Invoice Value:<input readonly type="number" step="any" name="TotalInvoiceValue" id="TotalInvoiceValue" pattern=".{1,}" autocomplete="off" required><br>
</form>
<script>
$('#Rate1').keyup(function(){
var Qty1;
var Rate1;
textone = parseFloat($('#Qty1').val());
texttwo = parseFloat($('#Rate1').val());
var result = textone * texttwo;
$('#Amt1').val(result.toFixed(2));
});
$('#Rate2').keyup(function(){
var Qty2;
var Rate2;
textone = parseFloat($('#Qty2').val());
texttwo = parseFloat($('#Rate2').val());
var result = textone * texttwo;
$('#Amt2').val(result.toFixed(2));
});
$('#Rate3').keyup(function(){
var Qty3;
var Rate3;
textone = parseFloat($('#Qty3').val());
texttwo = parseFloat($('#Rate3').val());
var result = textone * texttwo;
$('#Amt3').val(result.toFixed(2));
});
$('#Rate4').keyup(function(){
var Qty4;
var Rate4;
textone = parseFloat($('#Qty4').val());
texttwo = parseFloat($('#Rate4').val());
var result = textone * texttwo;
$('#Amt4').val(result.toFixed(2));
});
$('#Rate4').keyup(function(){
var Amt1;
var Amt2;
var Amt3;
var Amt4;
textone = parseFloat($('#Amt1').val());
texttwo = parseFloat($('#Amt2').val());
textthree = parseFloat($('#Amt3').val());
textfour = parseFloat($('#Amt4').val());
var result = textone + texttwo + textthree + textfour;
$('#TotalInvoiceValue').val(result.toFixed(2));
});
</script>
I tried to get the javascript to start taking totals from rate 1 itself by adding multiple element name in the #TotalInvoiceValue function like this:
$('#Rate1, #Rate2, #Rate3, #Rate4').keyup(function(){
var Amt1;
var Amt2;
var Amt3;
var Amt4;
textone = parseFloat($('#Amt1').val());
texttwo = parseFloat($('#Amt2').val());
textthree = parseFloat($('#Amt3').val());
textfour = parseFloat($('#Amt4').val());
var result = textone + texttwo + textthree + textfour;
$('#TotalInvoiceValue').val(result.toFixed(2));
});
But it still doesn't work.
I also tried assiging same class to all the Rate inputs like this:
html
<input id="Rate1" class="rate" type="text">
<input id="Rate2" class="rate" type="text">
<input id="Rate3" class="rate" type="text">
<input id="Rate4" class="rate" type="text">
javascript
$('.rate').on('keyup', function() {
let result = 0;
$('.rate').each(function() { result += parseFloat(this.value); });
$('#TotalInvoiceValue').val(result.toFixed(2));
})
And even this is not working for me. Please help.

In the Demo the following was used:
HTMLFormControlsCollection API
<input type="number">
<output></output>
oninput On-event Property
Event Delegation
Note: This is pure JavaScript.
If each input and output element has an initial value:
<input id="N0" type="number" value="0">
...
<input id="N*" type="number" value="0">
<output id="T0">0</output>
Then expressions like this will always be displayed as a number which is important if your event handler listens on an event that has an immediate reaction (ex. input, keypress, etc):
T0.value = N0.valueAsNumber + N1.valueAsNumber + ...N(N).valueAsNumber
Even though the only input the user uses was N0 at the time, N1 thu N(N) is still included in expression because they started off with value="0".
Demo
var sum = document.forms.sum;
var f = sum.elements;
var n0 = f.N0;
var n1 = f.N1;
var n2 = f.N2;
var n3 = f.N3;
var t0 = f.T0;
sum.oninput = add;
function add(e) {
if (e.target.className === "N") {
t0.value = n0.valueAsNumber + n1.valueAsNumber + n2.valueAsNumber + n3.valueAsNumber;
} else {
return false;
}
return false;
}
input {
font: inherit;
display: block;
width: 6ch
}
<form id='sum'>
<input id='N0' type='number' class='N' value='0'>
<input id='N1' type='number' class='N' value='0'>
<input id='N2' type='number' class='N' value='0'>
<input id='N3' type='number' class='N' value='0'>
<output id='T0'>0</output>
</form>

JSFiddle Example
https://jsfiddle.net/o2gxgz9r/47359/
HTML
<div>
Value 1: <input class="val" id="val1">
<br/>
Value 2: <input class="val" id="val2">
<br/>
Value 3: <input class="val" id="val3">
<br/>
Value 4: <input class="val" id="val4">
<br/>
Result: <input class="result">
</div>
JS
$(document).ready(function() {
var handleChange = function() {
var result = 0;
var setResult = true;
$(".val").each(function(){
if($(this).val() > 0) {
result += parseInt($(this).val());
} else {
setResult = false;
}
})
$(".result").val(setResult ? result : '');
};
$(".val").change(handleChange);
});

Thanks for all of your answers. Using your suggestions, this is how my problem got fixed:
HTML:
<form name="register" id="myForm" enctype="multipart/form-data" action="register" method="POST">
Qty :<input type="number" step="any" name="Qty1" autocomplete="off" id="Qty1" required><br>
Rate:<input type="number" step="any" name="Rate1" autocomplete="off" id="Rate1" class="rate" required><br>
Amount :<input readonly type="number" step="any" name="Amt1" autocomplete="off" id="Amt1" class="amt" required><br><br>
Qty :<input type="number" step="any" name="Qty2" autocomplete="off" id="Qty2" required><br>
Rate:<input type="number" step="any" name="Rate2" autocomplete="off" id="Rate2" class="rate" required><br>
Amount :<input readonly type="number" step="any" name="Amt2" autocomplete="off" id="Amt2" class="amt" required><br><br>
Qty :<input type="number" step="any" name="Qty3" autocomplete="off" id="Qty3" required><br>
Rate:<input type="number" step="any" name="Rate3" autocomplete="off" id="Rate3" class="rate" required><br>
Amount :<input readonly type="number" step="any" name="Amt3" autocomplete="off" id="Amt3" class="amt" required><br><br>
Qty :<input type="number" step="any" name="Qty4" autocomplete="off" id="Qty4" required><br>
Rate:<input type="number" step="any" name="Rate4" autocomplete="off" id="Rate4" class="rate" required><br>
Amount :<input readonly type="number" step="any" name="Amt4" autocomplete="off" id="Amt4" class="amt" required><br><br>
JAVASCRIPT:
$('#Rate1').keyup(function(){
var Qty1;
var Rate1;
textone = parseFloat($('#Qty1').val());
texttwo = parseFloat($('#Rate1').val());
var result = textone * texttwo;
$('#Amt1').val(result.toFixed(2));
});
$('#Rate2').keyup(function(){
var Qty2;
var Rate2;
textone = parseFloat($('#Qty2').val());
texttwo = parseFloat($('#Rate2').val());
var result = textone * texttwo;
$('#Amt2').val(result.toFixed(2));
});
$('#Rate3').keyup(function(){
var Qty3;
var Rate3;
textone = parseFloat($('#Qty3').val());
texttwo = parseFloat($('#Rate3').val());
var result = textone * texttwo;
$('#Amt3').val(result.toFixed(2));
});
$('#Rate4').keyup(function(){
var Qty4;
var Rate4;
textone = parseFloat($('#Qty4').val());
texttwo = parseFloat($('#Rate4').val());
var result = textone * texttwo;
$('#Amt4').val(result.toFixed(2));
});
$('.rate').on('keyup', function() {
var result = 0;
var setResult = true;
$('.amt').each(function() {
if($(this).val() > 0) {
result += parseFloat(this.value);
}
});
$('#TotalInvoiceValue').val(result.toFixed(2));
});

Finding the total or average from four input fields and displaying the value in another input field

I'm trying to use JS to get the sum or the average of four numbers from an input field and then displaying that in another text field. There's a radio button to choose if it's the total or average that is to be displayed.
Here is my html for the form:
<form name="calculate">
Mark: <input type="number" name="number" id="num1"><br>
Mark: <input type="number" name="number" id="num2"><br>
Mark: <input type="number" name="number" id="num3"><br>
Mark: <input type="number" name="number" id="num4"><br>
<input type="radio" id="numTotal" name="choice" value="total">Find total</input>
<input type="radio" id="numAvg" name="choice" value="average">Find average</input>
<br>
<input type="submit" form="calculate" value="Submit" onclick="calculate();">
<input type="reset" form="calculate" value="Reset">
<br>
Result: <input type="text" name="result" id="result" value="" disabled>
</form>
And down here is my JS code:
function calculate(){
var arr = document.getElementsByName("number");
var tot = 0;
var av = 0;
for(var i = 0; i < arr.length; i++) {
if(parseInt(arr[i].value)){
tot += parseInt(arr[i].value);
}
}
av = tot/arr.length;
if(document.getElementById("numTotal").checked) {
document.calculate.getElementbyId("result").value = tot;
}
if(document.getElementById("numAvg").checked) {
document.getElementbyId("result").value = av;
}
}
After running this, the result input field doesn't show the input. Is the error in my script or in the html or both?

<script type="text/javascript">
function calculateFunc() {
var arr = document.getElementsByName("number");
var tot = 0;
var av = 0;
for (var i = 0; i < arr.length; i++) {
if (parseInt(arr[i].value)) {
tot += parseInt(arr[i].value);
}
}
av = tot / arr.length;
if (document.getElementById("numTotal").checked) {
document.getElementById("result").value = tot;
}
if (document.getElementById("numAvg").checked) {
document.getElementById("result").value = av;
}
return false;
}
</script>
<div class="form">
<form name="calculate">
Mark: <input type="number" name="number" id="num1"><br>
Mark: <input type="number" name="number" id="num2"><br>
Mark: <input type="number" name="number" id="num3"><br>
Mark: <input type="number" name="number" id="num4"><br>
<input type="radio" id="numTotal" name="choice" value="total">Find total</input>
<input type="radio" id="numAvg" name="choice" value="average">Find average</input>
<br>
<br>
Result: <input type="text" name="result" id="result" value="" disabled>
</form>
<input type="submit" value="Submit" onclick="calculateFunc();">
<input type="reset" value="Reset">
</div>
This is work for me in Chrome :)

document.calculate.getElementbyId("result").value = tot;
if(document.getElementById("numTotal").checked) {
document.calculate.getElementbyId("result").value = tot;
}
if(document.getElementById("numAvg").checked) {
document.getElementbyId("result").value = av;
}
need to replace
document.getElementbyId("result").value = tot;
if(document.getElementById("numTotal").checked) {
document.calculate.getElementById("result").value = tot;
}
if(document.getElementById("numAvg").checked) {
document.getElementById("result").value = av;
}

How to show the results when checkbox is selected

Here is my code:
<form id="F2" onsubmit="return false;">
Which do you want?<br />
<input name="a" onclick="TotalCheckedValues()" type="checkbox" value="10" />New (10.00)<br />
<input name="b" onclick="TotalCheckedValues()" type="checkbox" value="0" />Broken (Free)<br />
<input name="c" onclick="TotalCheckedValues()" type="checkbox" value="55" />Antique (55.00)<br />
<input name="d" onclick="TotalCheckedValues()" type="checkbox" value="4.95" />Refurbished (4.95)<br />
Total: <input name="T" readonly="readonly" size="5" type="text" /><br />
<input onclick="TotalCheckedValues()" type="button" value="Click" /> </form>
function TotalCheckedValues() {
var total = 0;
if(document.getElementById("F2").a.checked == true) { total += parseFloat(document.getElementById("F2").a.value); }
if(document.getElementById("F2").b.checked == true) { total += parseFloat(document.getElementById("F2").b.value); }
if(document.getElementById("F2").c.checked == true) { total += parseFloat(document.getElementById("F2").c.value); }
if(document.getElementById("F2").d.checked == true) { total += parseFloat(document.getElementById("F2").d.value); }
var ts = new String(total);
if(ts.indexOf('.') < 0) { ts += '.00'; }
if(ts.indexOf('.') == (ts.length - 2)) { ts += '0'; }
document.getElementById("F2").T.value = ts;
document.getElementById("F3").innerHTML = ts;
}
I want to show the updated result whenever I click and untick the checkbox.

Just add "script" tag in your html before function start which indicate javascripts code.

How to calculate total price & grand total using keyup

hy all ..
I have quetion about jquery keyup
1. how I can calculate total from quantity[] * price[]
2 how I can callculate grantotal from price[]
I have try like this but not working
Thanks
$('input[name="qty[]"').each(function(index, value){
$('input[name="qty[]"').on('keyup',function(){
var tot = $('input[name="price[]"').val() * this.value;
$('input[name="subT[]"').val(tot);
// console.log($('input[name="qty[]"'));
})
});
//});
$('input[name="qty[]').keyup(function () {
var sum = 0;
$('.subT').each(function() {
sum += Number($(this).val());
});
$('#grandtotal').val(sum);
});

Change this
$('input[name="price[]"]')
to
$('input[name="price[]"]').val()
So, it should look like this:
$('input[name="qty[]"]').keyup(function() {
$('input[name="prodid[]"]').each(function() {
var subT = parseFloat($(this).val()) * parseFloat($('input[name="price[]"]').val());
$('input[name="total[]"]').val($(this).val() * $('input[name="price[]"]').val());
});
});

Try
$('input[name="qty[]"]').keyup(function() {
var total = (this.value * $(this).next('[name="price[]"]').val()) || 0;
$(this).next().next('[name="total[]"]').val(total)
var grand = 0;
$('[name="total[]"]').each(function() {
grand += +this.value || 0;
});
$('[name="grand_total"]').val(grand)
}).keyup();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input name="prodid[]" type="hidden" value="116">
<input name="qty[]" type="text" value="1" maxlength="2" class="detailinformation--input qty">
<input name="price[]" type="hidden" value="5">
<input name="total[]" type="hidden" value="">
<input name="prodid[]" type="hidden" value="117">
<input name="qty[]" type="text" value="1" maxlength="2" class="detailinformation--input qty">
<input name="price[]" type="hidden" value="4">
<input name="total[]" type="hidden" value="">
<input name="grand_total" type="text" value="">

SUM radio button values and checkboxes values in one calculation - javascript and html

I am trying to calculate the values of radio buttons and checkboxes.
I have the radio buttons working as required but cannot get the script right for the checkboxes.
I want the check boxes to have a sub total (which is working fine) and then have that subtotal added to the calculation of the radio buttons. Below is what I have so far.
Any suggestions would be appreciated.
Thanks.
<form name="form1" id="form1" runat="server">
<legend>Header 1</legend>
<p><input id="rdo_1" type="radio" value="3" name="price" onClick="DisplayPrice(this.value);"><label for="radio1">Radio 1</label></p>
<p><input id="rdo_2" type="radio" value="2" name="price" onClick="DisplayPrice(this.value);"><label for="radio2">Radio 2</label></p>
<p><input id="rdo_2" type="radio" value="1" name="price" onClick="DisplayPrice(this.value);"><label for="radio3">Radio 3</label></p>
</form>
<hr>
<form name="form2" id="form2" runat="server">
<legend>Header 2</legend>
<p><input id="rdo_1" type="radio" value="100" name="price2" onClick="DisplayPrice(this.value);"><label for="rad1">Radio 1</label></p>
<p><input id="rdo_2" type="radio" value="200" name="price2" onClick="DisplayPrice(this.value);"><label for="rad2">Radio 2</label></p>
</form>
<hr>
<form name="form3" id="form3" runat="server">
<legend>Header 3</legend>
<p><input id="rdo_1" type="radio" value="3" name="price3" onClick="DisplayPrice(this.value);"><label for="ra1">Radio 1</label></p>
<p><input id="rdo_2" type="radio" value="2" name="price3" onClick="DisplayPrice(this.value);"><label for="ra2">Radio 2</label></p>
<p><input id="rdo_2" type="radio" value="1" name="price3" onClick="DisplayPrice(this.value);"><label for="ra3">Radio 3</label></p>
</form>
<hr>
<form name="checkboxCalc" id="checkboxCalc">
<p><input onClick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_FBB" id="check01" value="300"/><label for="check01">Check 1</label></p>
<p><input onClick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_RHFG" id="check02" value="200"/><label for="check02">Check 2</label></p>
<p><input onClick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_LHFG" id="check03" value="200"/><label for="check03">Check 3</label></p>
</form>
<br />
<form name="form4" id="form4" runat="server">
<label for="check01">Sub Total: </label><input id="price4" type="text" name="price4" readonly="readonly" >
</form>
<script language="JavaScript" type="text/javascript">
var total = document.getElementById("price4")
function clickCh(caller){
if(caller.checked){
add(caller)
} else {
subtract(caller)
}
}
function add(caller){ total.value = total.value*1 + caller.value*1}
function subtract(caller){ total.value = total.value*1 - caller.value*1}
</script>
<hr>
<p><label for="valueTotal">Value$:</label>
<input type="text" name="valueTotal" id="valueTotal" value="" size="2" readonly="readonly"></p>
<script type="text/javascript">
function DisplayPrice(price){
var val1 = 0;
for( i = 0; i < document.form1.price.length; i++ ){
if( document.form1.price[i].checked == true ){
val1 = document.form1.price[i].value;
}
}
var val2 = 0;
for( i = 0; i < document.form2.price2.length; i++ ){
if( document.form2.price2[i].checked == true ){
val2 = document.form2.price2[i].value;
}
}
var val3 = 0;
for( i = 0; i < document.form3.price3.length; i++ ){
if( document.form3.price3[i].checked == true ){
val3 = document.form3.price3[i].value;
}
}
var val4 = 0;
for( i = 0; i < document.form4.price4.length; i++ ){
val4 = document.form4.price4[i].value;
}
var sum=parseInt(val1) + parseInt(val2) + parseInt(val3) + parseInt(val4);
document.getElementById('valueTotal').value=sum;
}
</script>

In Javascript if there is single texbox of a specific name then length function will be return undefined.
Here you can do two things.
First there is only single field of subtotal so u can assign value direct to val4 like given below
val4 = document.form4.price4.value;
Second If you want to run for loop then
var val4 = 0;
var form4 = document.form4.getElementsByTagName('input');
for( i = 0; i < form4.length; i++ ){
if(form4[i].type == 'text' && form4[i].name == 'price4'){
if(isNaN(parseInt(form4[i].value)) == false){
val4 = parseInt(parseInt(val4) + parseInt(form4[i].value));
}
}
}
Edited
In function
<script language="JavaScript" type="text/javascript">
var total = document.getElementById("price4")
function clickCh(caller){
if(caller.checked){
add(caller)
} else {
subtract(caller)
}
finalResult();
}
function add(caller){ total.value = total.value*1 + caller.value*1}
function subtract(caller){ total.value = total.value*1 - caller.value*1}
function finalResult(){
var val1 = 0;
for( i = 0; i < document.form1.price.length; i++ ){
if( document.form1.price[i].checked == true ){
val1 = document.form1.price[i].value;
}
}
var val2 = 0;
for( i = 0; i < document.form2.price2.length; i++ ){
if( document.form2.price2[i].checked == true ){
val2 = document.form2.price2[i].value;
}
}
var val3 = 0;
for( i = 0; i < document.form3.price3.length; i++ ){
if( document.form3.price3[i].checked == true ){
val3 = document.form3.price3[i].value;
}
}
var val4 = 0;
var form4 = document.form4.getElementsByTagName('input');
for( i = 0; i < form4.length; i++ ){
if(form4[i].type == 'text' && form4[i].name == 'price4'){
if(isNaN(parseInt(form4[i].value)) == false){
val4 = parseInt(parseInt(val4) + parseInt(form4[i].value));
}
}
}
var sum=parseInt(val1) + parseInt(val2) + parseInt(val3) + parseInt(val4);
document.getElementById('valueTotal').value=sum;
}
</script>
i hope it will be work for you
thanks

In your code you are trying to add value of "price4" which is blank at start.... try adding value of "valueTotal" which is total of radiobuttons value
Try this code... same code with some modifications
<form name="form1" id="form1" runat="server">
<legend>Header 1</legend>
<p>
<input id="rdo_1" type="radio" value="3" name="price" onclick="DisplayPrice(this.value);"><label
for="radio1">Radio 1</label></p>
<p>
<input id="rdo_2" type="radio" value="2" name="price" onclick="DisplayPrice(this.value);"><label
for="radio2">Radio 2</label></p>
<p>
<input id="rdo_2" type="radio" value="1" name="price" onclick="DisplayPrice(this.value);"><label
for="radio3">Radio 3</label></p>
</form>
<hr>
<form name="form2" id="form2" runat="server">
<legend>Header 2</legend>
<p>
<input id="rdo_1" type="radio" value="100" name="price2" onclick="DisplayPrice(this.value);"><label
for="rad1">Radio 1</label></p>
<p>
<input id="rdo_2" type="radio" value="200" name="price2" onclick="DisplayPrice(this.value);"><label
for="rad2">Radio 2</label></p>
</form>
<hr>
<form name="form3" id="form3" runat="server">
<legend>Header 3</legend>
<p>
<input id="rdo_1" type="radio" value="3" name="price3" onclick="DisplayPrice(this.value);"><label
for="ra1">Radio 1</label></p>
<p>
<input id="rdo_2" type="radio" value="2" name="price3" onclick="DisplayPrice(this.value);"><label
for="ra2">Radio 2</label></p>
<p>
<input id="rdo_2" type="radio" value="1" name="price3" onclick="DisplayPrice(this.value);"><label
for="ra3">Radio 3</label></p>
</form>
<hr>
<form name="checkboxCalc" id="checkboxCalc">
<p>
<input onclick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_FBB" id="check01"
value="300" /><label for="check01">Check 1</label></p>
<p>
<input onclick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_RHFG"
id="check02" value="200" /><label for="check02">Check 2</label></p>
<p>
<input onclick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_LHFG"
id="check03" value="200" /><label for="check03">Check 3</label></p>
</form>
<br />
<form name="form4" id="form4" runat="server">
<label for="check01">
Sub Total: </label><input id="price4" type="text" name="price4" readonly="readonly">
</form>
<p>
<label for="valueTotal">
Value$:</label>
<input type="text" name="valueTotal" id="valueTotal" value="" size="2" readonly="readonly"></p>
<script language="JavaScript" type="text/javascript">
var total = document.getElementById("valueTotal")
var result = document.getElementById("price4")
function clickCh(caller)
{
if (caller.checked)
{
add(caller)
} else
{
subtract(caller)
}
}
function add(caller) { result.value = total.value * 1 + caller.value * 1 }
function subtract(caller) { result.value = result.value * 1 - caller.value * 1 }
</script>
<hr>
<script type="text/javascript">
function DisplayPrice(price)
{
var val1 = 0;
for (i = 0; i < document.form1.price.length; i++)
{
if (document.form1.price[i].checked == true)
{
val1 = document.form1.price[i].value;
}
}
var val2 = 0;
for (i = 0; i < document.form2.price2.length; i++)
{
if (document.form2.price2[i].checked == true)
{
val2 = document.form2.price2[i].value;
}
}
var val3 = 0;
for (i = 0; i < document.form3.price3.length; i++)
{
if (document.form3.price3[i].checked == true)
{
val3 = document.form3.price3[i].value;
}
}
var val4 = 0;
for (i = 0; i < document.form4.price4.length; i++)
{
val4 = document.form4.price4[i].value;
}
var sum = parseInt(val1) + parseInt(val2) + parseInt(val3) + parseInt(val4);
document.getElementById('valueTotal').value = sum;
}
</script>
Thank you. hope it will work