Question

I have a somewhat large form that takes monetary values and has a total sum at the end. I am trying to automatically update the total using javascript (jQuery). Some of the input fields are optional. I am looking at using the .change() method. Is there a better way than to associate a change method with every single input field?

The script just needs to take the values from the input fields (if any), add them up and display the total somewhere. My idea was to tag each of the relevant input fields and select them. Is this possible?

[edit]
example code:

<input name="input1" type"text" />
<input name="input2" type"text" />
<input name="input3" type"text" />
<input name="input4" type"text" />
<input name="input5" type"text" />
<input name="input6" type"text" />

<input name="total" type="text" />

All the inputs are initially blank. I want the total to update as I enter values into the inputs.

Answer 1

If you add a class (call it "foo") to each input element that you want to total up, then this will work:

var $form = $('#my-form-id'),
    $summands = $form.find('.foo'),
    $sumDisplay = $('some-other-selector');

$form.delegate('.foo', 'change', function ()
{
    var sum = 0;
    $summands.each(function ()
    {
        var value = Number($(this).val());
        if (!isNaN(value)) sum += value;
    });

    $sumDisplay.text(sum);
});

Demo: http://jsfiddle.net/mattball/XcYTc/