javascript - search multiple html #ID and pass to function

Question

Hiya,

I've got an order form, to which I can append fields by clicking a button. I've got some back end javascript running which totals up the order price, but the grand total script is eluding me.

My problem is that I need the script to seach the entire DOM and find how many have an ID which matches the following pattern.

totprice01 totprice02 totprice03 totprice(n)

I've been playing with this regex, but with not a lot of luck i'm afraid:

matchStr = new RegExp("\\btotprice\\d{2}\\b", "gi");

Once i've got an array of all the HTML IDs I need to pass them into a function which so far looks like this - notice it's all hard coded, not in the least dynamic:

document.getElementById('totpricetot').value = Math.round((parseFloat(document.getElementById('totprice1').value)+parseFloat(document.getElementById('totprice2').value)+parseFloat(document.getElementById('totprice3').value)+parseFloat(document.getElementById('totprice4').value)+parseFloat(document.getElementById('totprice5').value)+parseFloat(document.getElementById('totprice6').value)+parseFloat(document.getElementById('totprice7').value)+parseFloat(document.getElementById('totprice8').value)+parseFloat(document.getElementById('totprice9').value)+parseFloat(document.getElementById('totprice10').value))*100)/100;

Is anyone able to help me put this into expression + function to return the sum of all the values into ?

Thanks a lot!

EDIT

OK I decided to ditch just using plain ol' javascript - JQuery it is! I've put together this code using some of the examples below, but can someone help me debug it I keep get "not defined" errors from the debugger - it appears this function is unavailable to the rest of the DOM?

<input id="totprice08" onChange="totChange()" class="total_field" />
<input id="totprice09" onChange="totChange()" class="total_field" />
<input id="totprice10" onChange="totChange()" class="total_field" />
etc...
<input id="totpricetot" value="0.00" name="totpricetot" />

jQuery(function($) {
  function totChange() {
    var sum=0;
    $('.total_field').each(function() {
     sum += $( this ).val () * 1;
    } );
    $('#totpricetot').val(sum);
  }
});

Answer 1

You could give all your total price elements the same CSS class and then get all elements of this class (nice and easy with JQuery).

Answer 2

Give each element a class and use jQuery.

Answer 3

Using jQuery, you could select and sum the elements like this:

var sum = 0;
$('[id^=totprice-]').each(function()
{
    sum += $(this).val();
});

Answer 4

Give the inputs you need to sum up a class and then get those inputs by that class name (jQuery or some other framework would come in handy here).

if you would use jQuery you could do something like this:

function calculateSum () {
    var sum = 0;
    $( '.YourClass' ).each ( function () {
     sum += $( this ).val () * 1;
    } );

    return sum;
}

Answer 5

There are lots of solutions. Besides giving all the elements in question the same class name and use jQuery (or something similar), you could also simply remember the total number of the elements in some JavaScript variable. Would it be possible? I know - it’s kind of an old school solution. You have not indicated that you are using jQuery or any other JavaScript library, so it may be more suitable for you.

Edit: Just to be more explicit:

// your variable, updated every time you add/remove a new field
var fieldsCount; 

// whenever you need to do anything with all the fields:
for (var i = 0; i < fieldsCount; i++)
{
    var field = document.getElementById("totprice" + i);
    // ...
}

Answer 6

I love it how every javascript question on SO is answered by, "use jQuery"...

Anyways...you can do it with just plain ol' javascript too:

var inputs = document.getElementsByTagName("input");
var priceInputs = [];
for (var i=0, len=inputs.length; i<len; i++) {
    if (inputs[i].tagName.indexOf("totprice") > -1) {
        priceInputs[priceInputs.length] = parseInt(inputs[i].value);
    }
}
calcTotal(priceInputs);

Then just create a function to loop through the array and sum up (: