Question

I am using jquery calculation to do a sum on one of my client pages. Simple calculation is working fine but I have to integrate an add and remove button with the input tags. As in instead of manually entering a number client wants to use add and remove button to increase and decrease the value of the product and eventually adding up to the totalSum.

Hoping someone can help me with this as I am not yet an expert in jquery. 🙂

Here the HTML code

<div class="amount">    
            <input type="text" class="count"  name="totalSum" id="totalSum" value="" size="2" readonly="readonly">                      </div>



    <div class="clearfix"></div><!--Please do not delete this div-->
    <!--Case 1-->       
    <div class="bottle_in_case">
                <div class="addRemove">
                <input type="text" value="2" class="count" maxlength="2" name="case" id="case_1"> bottles
                <p class="add_remove_btns"><a href="#"><img src="images/add.gif" alt=""> Add</a> / <a href="#"><img src="images/remove.gif" alt=""> Remove</a></p>
            </div>
    </div>

    <!--Case 2-->       
    <div class="bottle_in_case">

        <div class="addRemove">
                <input type="text" value="2" class="count" maxlength="2" name="case" id="case_2"> bottles
                <p class="add_remove_btns"><a href="#"><img src="images/add.gif" alt=""> Add</a> / <a href="#"><img src="images/remove.gif" alt=""> Remove</a></p>
            </div>
    </div>

    <!--Case 3-->       
    <div class="bottle_in_case last">

            <div class="addRemove">
                <input type="text" value="2" class="count" maxlength="2" name="case" id="case_3"> bottles
                <p class="add_remove_btns"><a href="#"><img src="images/add.gif" alt=""> Add</a> / <a href="#"><img src="images/remove.gif" alt=""> Remove</a></p>
            </div>
    </div>

The Script I have used is

$("input[name^='case']").sum();

$(“input[name^=case]”).sum(“keyup”, “#totalSum”);

Thanks in advance

Neha

Answer 1

First things first: to attach a quantity changer to the add.gif and remove.gif:

<p class="add_remove_btns"><a href="#"><img src="images/add.gif" alt=""> Add</a> / <a href="#"><img src="images/remove.gif" alt=""> Remove</a>

Change all instances of above to

<p class="add_remove_btns"><a href="#" class="add_qty" rel="1"><img src="images/add.gif" alt=""> Add</a> / <a href="#" class="remove_qty" rel="1"><img src="images/remove.gif" alt=""> Remove</a>

Of course each instance of rel=”1″ or rel=”2″ would have to correspond with the id=”case_1″ ‘s numbers…

Now in the jQuery (running on document ready syntax)

$('add_qty').each(function(){
  $(this).click(function() {
    var target = $(this).attr('rel');
    var newqty = $('#case_'+target).val()+1;
    $('#case_'+target).val(newqty);
    recalculate_total();
    return false;
  });    
});

$('remove_qty').each(function(){
  $(this).click(function() {
    var target = $(this).attr('rel');
    var newqty = $('#case_'+target).val()-1;
    if(newqty<0) {newqty=0;} // qty cannot be below 0, so override to 0 if thats the case
    $('#case_'+target).val(newqty);
    recalculate_total();
    return false;
  });    
});

To get the sum of all the rows, create this function OUTSIDE the document ready syntax:

 function recalculate_total() {
    var total = 0;
    $('input.count').each(function(){
    total = total+$(this).val()*1;
    });
    $('#totalSum').val(total);
    }

Let me know if this works.. provide a URL for me too so I can troubleshoot if there is an error.