Question

I’m trying to get an autosum from fields, the issue is that if the total of fields are without value the script is not working correctly, and also if there are more than 7 fields again the script is not working.

here is the javascript:

function getTotal()
{
    var value01 = document.getElementById('value01').value;
    var value02 = document.getElementById('value02').value;
    var value03 = document.getElementById('value03').value;
    var value04 = document.getElementById('value04').value;
    var value05 = document.getElementById('value05').value;
    var value06 = document.getElementById('value06').value;
    var value07 = document.getElementById('value07').value;

    // Add them together and display
    var sum = parseInt(value01) + parseInt(value02) + parseInt(value03) + parseInt(value04) + parseInt(value05) + parseInt(value06) + parseInt(value07);
    document.getElementById('sum_total').value = sum;
}

inputs:

<input type="text" id="value01" />
<input type="text" id="value02" />
<input type="text" id="value03" />
here is starting to be added with a button more input fields.
<input type="text" id="+" />
<input type="text" id="++" />
<input type="button" value="Add Them Together" onclick="getTotal();" />

my question is, how can i get an auto + on var value01 02 03 etc.

Any help is appreciated.

Answer 1

Your question is not very clear and so I’m not too sure what you are wanting to do so feel free to offer clarification for optimum assistance. On that note, based off of what you have provided, I have two things to point out:

1) Your ID of “+” is not valid. Per the HTML 4 spec:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be
followed by any number of letters, digits ([0-9]), hyphens (“-“),
underscores (“_”), colons (“:”), and periods (“.”).

2) Instead of creating a different var containing each value, I would recommend creating a function that you can use within a for loop that will determine the sums of each incremental input. This is more DRY and helps simplify things if the number of inputs were to grow.

function getValues(id){
    return document.getElementById(id).value;
}

The pure JavaScript solution below begins with one input box and will add additional inputs with the click of a button, which I believe is what you’re looking for. You can modify the number of initial input boxes accordingly, but it should give you an idea.

Javascript:

var max = 1;

function getValues(id){
    var result = document.getElementById(id).value;
    return (result ? result : 0);
}

function addInput(){
    max++;
    var input = '<input type="text" id="value'+ max +'" />';
    document.getElementById("valuesContainer").innerHTML += input;
}

function getTotal(){
    var sum = 0;
    for(var i=1; i <= max; i++){
        sum = sum + parseFloat(getValues("value" + i));
    }
    document.getElementById("total").innerHTML = sum;
}

HTML:

<div id="valuesContainer">
<input type="text" id="value1" />
</div>
<input type="button" value="Add Value" id="addMore" onclick="addInput();" />
<input type="button" value="Calculate Total" onclick="getTotal();" />
<div id="total"></div>

Demo: http://jsfiddle.net/Y4xgU/