How to calculate total from select fields with Javascript?

Question

So it should calculate everything what's selected in select lists and each value starts with $ sign (I was thinking this $ sign should be a main string for js to detect on or something, can't be class or ID, since end-user would be creating custom forms himself all the time)

I did some html form sketch http://jsfiddle.net/tbq8eo8b/2/

<div class="webform-component-select">
    <label>Select amount #1</label>
    <select>
        <option selected="selected">None</option>
        <option>$200</option>
        <option>$300</option>
    </select>
    <label>Select amount #2</label>
    <select>
        <option selected="selected">None</option>
        <option>$200</option>
        <option>$300</option>
    </select>
    <label>Some random select list</label>
    <select>
         <option selected="selected">None</option>
         <option>This list has no dollar sign, so do not calculate it whatever is selected in here</option>
    </select>
    <label>Total amount</label>
    <input disabled>
</div>

So when user selects amount from one form, js automatically adds it up live to that Total amount field. And when user selects another amount from another field, js would add it up to the current total and update it with new total. So if user chose $100 and $100 then the total is $200.

I don't know. I'm new with js, don't know how else to explain. Cheers.

Answer 1

Here ya go: http://jsfiddle.net/tbq8eo8b/3/

 $(document).ready(function(){ $('select').change(function(){ var totalVal = 0; $('select.add').each(function(){ totalVal += parseInt($(this).val()) ; }); $('input').val(totalVal); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="webform-component-select"> <label>Select amount #1</label> <select class="add"> <option value="0" selected="selected">None</option> <option value="200">$200</option> <option value="300">$300</option> </select><p> <label>Select amount #2</label> <select class="add"> <option value="0" selected="selected">None</option> <option value="200">$200</option> <option value="300">$300</option> </select><p> <label>Some random select list</label> <select> <option selected="selected">None</option> <option>This list has no dollar sign, so do not calculate it whatever is selected in here</option> </select><p> <label>Total amount</label> <input disabled> </div> 

Answer 2

The easiest way would be if you give the relevant option elements an appropriate value attribute:

<option value="200">$200</option>

...so that you don't have to deal with the dollar signs. But if you can't do that for some reason you can use a regex to extract the value after the dollar signs while ignoring fields that don't have dollar signs:

$(document).ready(function () {
    var $selects = $("select").change(function (e) {
        var total = 0;
        $selects.each(function() {
            var val = this.value.match(/^\$(\d+)$/);
            total += val ? +val[1] : 0;
        });
        $("#total").val(total);
    });
});

I've given the total field an id so that you can reference it from JS to update its value. If you can't do that for some reason I guess you could say $("input[disabled]").val(total) or similar, but that's really not reliable if the user is creating the form.

Demo: http://jsfiddle.net/tbq8eo8b/6/

Answer 3

Sounds like you could have some use for KnockoutJS .

Not sure if it's the right thing to start with when going into JavaScript but it does beautifully what you're trying to achieve. And you'll save yourself from a lot of buggy and ugly jQuery code.

See through the tutorial I linked and see if you like.