CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
Chriser
Chriser

Reputation: 177

jQuery: add up attribute values on click

I have eCommerce site. I have product page where you can pick up different variations and addons to main product. I would like to be able to dynamically display price when customer is clicking on options.

Basic html looks like this:

<div class="addons">
    <input type="radio" name="products[39][addons][Handles]" title="Handles" value="579" alt="7.00" class="options"> Bronze Left
    <input type="radio" name="products[39][addons][Handles]" title="Handles" value="580" alt="8.00" class="options"> Bronze Right
    <input type="radio" name="products[39][addons][Handles]" title="Handles" value="581" alt="9.00" class="options"> Chrome Left
    <input type="radio" name="products[39][addons][Handles]" title="Handles" value="582" alt="10.00" class="options"> Chrome Right  

    <input type="radio" name="products[39][addons][Glass]" title="Glass" value="589" alt="18.00" class="options"> Brass Clarity
    <input type="radio" name="products[39][addons][Glass]" title="Glass" value="590" alt="20.00" class="options"> Zinc Abstract
    <input type="radio" name="products[39][addons][Glass]" title="Glass" value="591" alt="21.00" class="options"> Zinc Elegance
    <input type="radio" name="products[39][addons][Glass]" title="Glass" value="592" alt="23.00" class="options"> Zinc Prairie  
</div>

Value attribute is used for add to cart functionality and I cannot change that, price is set as alt but can be anything obviously and title is set jQuery click target.

I need help with jQuery. The problem I have is that I don't know how to get var price to add up to each other outside click function.

$("input[type='radio'][title='Handles']").click(function() {
    price = $(this).val();
}

$("input[type='radio'][title='Glass']").click(function() {
    price = $(this).val();
}

Upvotes: 0

Views: 586

Answers (4)

Hubro
Hubro

Reputation: 59383

If I'm understanding this correctly you want to add up the price of each selected option. Here's one way of doing that:

// An object to keep track of the total amount of each title
var total = {};

// Change event on the radio buttons
$('input[type=radio]').change(function() {
    // Assign the alt to the total object with the key name being the title
    total[$(this).attr('title')] = parseFloat($(this).attr('alt')).toFixed(2);

    // Output the result to HTML (optional)
    outputTotal();
});

function outputTotal()
{
    // Here all the prices are being summed
    var sum = 0;

    for(var index in total)
    {
        sum += total[index];
    }

    // And output to HTML
    $('.total').html(sum);
}

jsFiddle example

Upvotes: 0

Tim Vermaelen
Tim Vermaelen

Reputation: 7069

var inputs = $(".addons input.options");
inputs.click(function() {
    var total = 0;
    $(".addons").find(":checked").each(function(){
       total += parseFloat($(this).attr("alt"));
    });
    $("#total").val(total);
});

http://jsfiddle.net/tive/fyZbV/

Upvotes: 0

McGarnagle
McGarnagle

Reputation: 102783

If I'm understanding, you just want to add the values in alt. You can do that as follows:

var total = 0;
$(".addons").find("input:checked").each(function() {
    total += parseFloat($(this).attr('alt'));
});

You'd run this code in the click handlers, and update whatever HTML displays the total.

EDIT "input:checked" is cleaner than "input[checked=checked]".

Upvotes: 1

DMin
DMin

Reputation: 10363

you can use input[type='radio']:checked to filter and get the elements you are looking for.

var total = 0;

// Get all the input tags that are checked.
$(".addons").find("input[type='radio']:checked").each(function() {
    total += parseFloat($(this).attr('alt'));
});

Upvotes: 1

Related Questions