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.

nnnnnn · Accepted Answer · 2014-09-23 21:23:09Z

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/

Leeish · Accepted Answer · 2014-09-23 21:18:30Z

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>

Jani Hyytiäinen · Accepted Answer · 2014-09-23 21:19:50Z

-1

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.

answered Sep 23, 2014 at 21:19

Jani Hyytiäinen

5,40738 silver badges47 bronze badges

1 Comment

Jani Hyytiäinen Over a year ago

Please leave a comment with a reason if you downvote. Otherwise it'll be like saying FU and running away.

Collectives™ on Stack Overflow

How to calculate total from select fields with Javascript?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related