View Full Version : calculating numeric values from textboxes and outputting the total on another textbox

Aug 10th, 2012, 07:28 PM
hey people, i have a problem of calculating values and outputting it into another textbox.

basically it is a order form where customers select particular products within several sections. each section has its own subtotal. once particular products are selected, the customer clicks on the subtotal button which shows the total

i have a grand total button where it will added up all the subtotals of the several sections and show it in a textbox

the coding i have done so far is:

function calcTotal()

var resultOne = document.getElementById('result').value;
var resultTwo = document.getElementById('resultTwo').value;
var resultThree = document.getElementById('resultThree').value;
var resultFour = document.getElementById('resultFour').value;
var resultFive = document.getElementById('resultFive').value;
var resultSix = document.getElementById('resultSix').value;
var resultSeven = document.getElementById('resultSeven').value;
var resultEight = document.getElementById('resultEight').value;
var resultNine = document.getElementById('resultNine').value;
var resultTen = document.getElementById('resultTen').value;
var resultEleven = document.getElementById('resultEleven').value;
var resultChicken = document.getElementById('resultChicken').value;
var resultLamb = document.getElementById('resultLamb').value;
var resultSheep = document.getElementById('resultSheep').value;
var resultFish = document.getElementById('resultFish').value;

var total2= (resultOne + resultTwo + resultThree + resultFour + resultFive + resultSix + resultSeven + resultEight + resultNine + resultTen + resultEleven + resultChicken + resultLamb + resultSheep + resultFish);

document.getElementById("total").value = total2.toFixed(2);


thank you

Philip M
Aug 10th, 2012, 08:29 PM
So what is your problem?

Form fields are string values unless/until converted to numbers, thus:-

var resultOne = Number(document.getElementById('result').value);

var resultThree = document.getElementById('resultThree').value;

You are using the same name for an HTML element and a Javascript variable. That is contra-indicated.

I never dreamed that i would be a flagbearer. So yeah, it's a dream come true. - Olympic Interviewee, BBC News Channel

Old Pedant
Aug 10th, 2012, 08:31 PM
You must convert the strings in all those form fields to *NUMBERS*.

var resultOne = Number( document.getElementById('result').value );

and so on.


I'm getting faster! Only 2 minutes slower than Philip, this time.

Aug 11th, 2012, 03:42 PM
thanks guys it works perfectly :)