jQuery form calculation

Question

I need to produce a calculation on a form after first selecting one of two price plan options and my knowledge of jQuery isn't sufficient (yet!) :)

I need the value of "Payment" to be either the total of the select boxes in Plan 1 OR the set price of Plan 2 and I'd deeply appreciate help with achieving the calculation.

Here's some code:

<div class="form-row">
    <div class="plan-select">
        <div class="form-row">
            <div class="label-container">
                <label for=""></label>
            </div>
            <div class="input-container">
                <input type="radio" id="planchoose" name="planchoose" value="0.00" checked /> Plan 1
            </div>
        </div>
        <div class="form-row">
            <div class="label-container">
                <label for="Bin1_Count">Bin 1</label>
            </div>
            <div class="input-container">
                <select id="Bin1_Count" name="Bin1_Count">
                    <option value="0"> - select - </option>
                    <option value="10.00">1 - 10.00</option>
                    <option value="15.00">3 - 15.00</option>
                    <option value="52.00">13 - 52.00</option>
                </select>
            </div>
        </div>
        <div class="form-row">            
            <div class="label-container">
                <label for="Bin2_Count">Bin 2</label>
            </div>
            <div class="input-container">
                <select id="Bin2_Count" name="Bin2_Count">
                    <option value="0"> - select - </option>
                    <option value="10.00">1 clean - 10.00</option>
                    <option value="15.00">3 cleans - 15.00</option>
                    <option value="52.00">13 cleans - 52.00</option>
                </select>
            </div>
        </div>        

    </div>

    <div class="plan-select-split">OR</div>

    <div class="plan-select">
        <div class="form-row">
            <div class="label-container">
            </div>
            <div class="input-container">
                <input type="radio" id="planchoose" name="planchoose" value="120" /> Plan 2
                <p>Set price<br /></p>
            </div>
        </div>        
    </div>
</div>
<div class="form-row">
    <div class="label-container">
        <label for="Payment">Total</label>
    </div>
    <div class="input-container">
        <input type="text" id="Payment" name="Payment" value="0.00" readonly />
    </div>
</div>

And here's a Fiddle: http://jsfiddle.net/xXQHJ/3/

I thank you most sincerely in advance for any help.

Have you written *any* JavaScript?? – j08691 Jul 14 '14 at 15:29 — j08691, Jul 14 '14 at 15:29

score 2 · Accepted Answer · answered Jul 14 '14 at 15:44

This code should be what you need:

.on() documentation for jQuery

$(document).ready(function() {
    $(document).on('change', '.binOptions', function() {
        var bin1, bin2, finalTotal;
        bin1 = $(' #Bin2_Count option:selected ').val();
        bin2 = $(' #Bin1_Count option:selected ').val();
        finalTotal = parseFloat(bin1) + parseFloat(bin2);
        $(' #Payment ').val(finalTotal.toFixed(2));
    });
});

Anddd a fiddle for you.

Edit: Please be aware that the "binOptions" class has been added to your select boxes. Also, Dave's answer is also correct, but please be aware that .change() will NOT working on content dynamically generated to your page (just a bit of info for future proofing).

I know this is very late, but thank you. Your answer helped me eventually complete the whole thing. Thank you also for not blasting me for not having splattered my own non-working attempts all over the place! — Sarah, Nov 07 '14 at 13:20

score 1 · Answer 2 · answered Jul 14 '14 at 15:59

This covers both possibilities. I had to change the ids on the radios, they should be distinct anyway.

$('input[name=planchoose], select').on('change',function(){
    var chosenPlan = $('input[name=planchoose]:checked').attr('id');
    var total = 0.00;
    switch (chosenPlan){
        case 'planchoose1':
            total = parseFloat($('#Bin1_Count').val()) +  parseFloat($('#Bin2_Count').val());
        break;
        case 'planchoose2':
            total = parseFloat($('#planchoose2').val());
        break;
    }
    $('#Payment').val(total.toFixed(2));
});

Fiddle: http://jsfiddle.net/xXQHJ/5/

score 0 · Answer 3 · answered Jul 14 '14 at 15:40

Here's something to get you started: http://jsfiddle.net/daveSalomon/xXQHJ/4/ .

Main point from your code: Don't have the same ID attached to multiple elements. ID's must be unique.

HTML

<div class="form-row">
<div class="plan-select">
    <div class="form-row">
        <div class="label-container">
            <label for=""></label>
        </div>
        <div class="input-container">
            <input type="radio" id="plancalc" name="plan" value="0.00" checked /> Plan 1
        </div>
    </div>
    <div class="form-row">
        <div class="label-container">
            <label for="Bin1_Count">Bin 1</label>
        </div>
        <div class="input-container">
            <select id="Bin1_Count" name="Bin1_Count">
                <option value="0"> - select - </option>
                <option value="10.00">1 - 10.00</option>
                <option value="15.00">3 - 15.00</option>
                <option value="52.00">13 - 52.00</option>
            </select>
        </div>
    </div>
    <div class="form-row">            
        <div class="label-container">
            <label for="Bin2_Count">Bin 2</label>
        </div>
        <div class="input-container">
            <select id="Bin2_Count" name="Bin2_Count">
                <option value="0"> - select - </option>
                <option value="10.00">1 clean - 10.00</option>
                <option value="15.00">3 cleans - 15.00</option>
                <option value="52.00">13 cleans - 52.00</option>
            </select>
        </div>
    </div>        
</div>
<div class="plan-select-split">OR</div>
<div class="plan-select">
    <div class="form-row">
        <div class="label-container">
        </div>
        <div class="input-container">
            <input type="radio" id="planset" name="plan" value="120" /> Plan 2
            <p>Set price<br /></p>
        </div>
    </div>        
</div>
</div>
<div class="form-row">
<div class="label-container">
    <label for="Payment">Total</label>
</div>
<div class="input-container">
    <input type="text" id="Payment" name="Payment" value="0.00" readonly />
</div>
</div>

Javascript

$(document).ready(function(){
    // -- calculated price
    $('#plancalc,#Bin1_Count,#Bin2_Count').change(function(){
        var price = Number($('#Bin1_Count').val()) + Number($('#Bin2_Count').val());
        $('#plancalc').click();
        $('#Payment').val(price);
    });
    // -- set price
    $('#planset').change(function(){
        $('#Payment').val('set price...');
    });
});

In future, do have a go yourself first - people are more willing to help if we can see that you've made an effort!

jQuery form calculation

3 Answers3