Adding numbers from 2 or more textfileds into a textfiled?!?!

[jmansa]

I have tryid to search the net for a good tutorial or script for this but with no luck :-(.

I want to dynamicly add numbers inserted in 2 or more textfields into another textfield. Can somebody guide me in the right direction in terms of tutorials or scripts...

Thanks

[ssttoo]

Sample HTML code with 5 text fields, a button and one field for the result

<input type="text" name="t1" id="t1" /><br />
<input type="text" name="t2" id="t2" /><br />
<input type="text" name="t3" id="t3" /><br />
<input type="text" name="t4" id="t4" /><br />
<input type="text" name="t5" id="t5" /><br />

<input type="button" value="add" id="add" />
<input type="text" name="result" id="result" />

The javascript code, hopefully the comments will help you customize to your needs

<script type="text/javascript">
 
// attach click listener
document.getElementById('add').onclick = function() {
 
    // IDs of the text fields you want to add
    var addthese = ['t1', 't2', 't3', 't4', 't5'];
 
    var result = 0; // end result
    var tmp = 0;    // the next number
 
    for (var i = 0; i < addthese.length; i++){
 
        // get the number value of the next field
        tmp = parseInt(document.getElementById(addthese[i]).value, 10);
 
        if (isNaN(tmp)) { // make it 0 if it's not a valid number
            tmp = 0;
        }
        result += tmp; // add to the running sum
 
    }
 
    // update the result field
    document.getElementById('result').value = result;
 
 
}
 
</script>

[jmansa]

Thanks... Does this do in realtime? I think is something like onChange???

[jimfraser]

For onchange:

<script type="text/javascript">

// IDs of the text fields you want to add
var addthese = ['t1', 't2', 't3', 't4', 't5'];

function addEm() {
 
    var result = 0; // end result
    var tmp = 0;    // the next number
 
    for (var i = 0; i < addthese.length; i++){
 
        // get the number value of the next field
        tmp = parseInt(document.getElementById(addthese[i]).value, 10);
       
        if (isNaN(tmp)) { // make it 0 if it's not a valid number
            tmp = 0;
        }
        result += tmp; // add to the running sum
 
    }
 
    // update the result field
    document.getElementById('result').value = result;
}

// attach click listener
document.getElementById('add').onclick = addEm;

// attach onchange listener
for (var i=0; i < addthese.length; i++) {
	document.getElementById(addthese[i]).onchange = addEm;
}
 
</script>