JQuery array's and input checkbox + hidden

Question

Hey guys I have a table with a couple of checkboxes, all of those checkboxes have a numeric value in a hidden input next to them. I would like to display the sum of those in a input text at the bottom of my little table. I came as far as the script bellow but it turns out my JS and JQuery knowledge is (way?) to minimal. Any clue to what the best approach to this is?

<td>
    <input checked="checked" type="checkbox" class="processPaymentProducts" name="processPaymentProducts[]" value="<?=$transaction['student_transaction_id']?>" />
    <input type="hidden" id="prodPrice[<?=$transaction['student_transaction_id']?>]" name="prodPrice[<?=$transaction['student_transaction_id']?>]" value="<?=($transaction['student_transaction_amount_min']*100)?>" />
</td>

<script>
    $(document).ready(function() {
        $(".processPaymentProducts").click(function(){
            var amount;
            $amount = 0;
            jQuery.each($(".processPaymentProducts:checked").val(), function() {
                $amount += $(this).next('input').val();
                console.log($(this).next('input').val());
            });
            if($amount>100) { $amount = $amount/100; } else { $amount = 0; }
            $('#processPaymentAmount').val($amount);
        });
    });
</script>

i have updated with demo and explanation...hope this help

Luca Filosofi
– Luca Filosofi

2011-08-19 09:48:54 +00:00
Commented Aug 19, 2011 at 9:48 — Luca Filosofi
– Luca Filosofi, Commented Aug 19, 2011 at 9:48

frosty · Accepted Answer · 2011-08-19 09:18:29Z

2

For starters, you don't need a selector inside the .next(). The .next will work fine given your markup. Further, the .each doesn't work like you are using it. I have changed it. Also, when doing math based on input values, sometimes you get undefined which can freak things out. If you do the || 0 at the end of your value selector, it will return 0 if you get an undefined. So... that is good. Try it out.

$(document).ready(function() {
    $(".processPaymentProducts").click(function(){
        var amount;
        $amount = 0;
        $(".processPaymentProducts:checked").each(function() {
            $amount += $(this).next().val() || 0;
            console.log($(this).next().val() || 0);
        });
        if($amount>100) { $amount = $amount/100; } else { $amount = 0; }
        $('#processPaymentAmount').val($amount);
    });
});

answered Aug 19, 2011 at 9:18

frosty

21.8k8 gold badges58 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

PvdL Over a year ago

Thanks! The biggest problem was in the each loop, this fixed that problem

尤川豪 · Accepted Answer · 2011-08-19 09:25:05Z

1

Every field in html is "string", even numbers in the fields would be treated like string.

So you should use parseInt() method to translate string into integer

for example,

this code:

$amount += $(this).next('input').val()

should be

$amount += parseInt($(this).next('input').val())

after you complete all the calculation, remember to translate integer back to string to put it into field, too.

answered Aug 19, 2011 at 9:25

尤川豪

4896 silver badges26 bronze badges

1 Comment

frosty Over a year ago

kind of agree... however, the parseInt can be messed with. If you try parseInt("8"), you get 8, but if you try parseInt("08"), you get 10 (cause it uses octal). Rule of thumb (per Javascript: The Good Parts) is always use the second parameter in parseInt. So you should use parseInt("08",10) would give you decimal instead of a octal. Good luck!

Collectives™ on Stack Overflow

JQuery array's and input checkbox + hidden

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related