Simple calculation using jQuery

Question

HI freinds I developing a Simple calculator in which when user selects any product by check the checkbox then the price of the selected product will be displayed in .count <td>there are four product and each product has its own checkhox and .count class.

Now the main thing I want when user select any of product and increase its quantity then plus all the amount and display in .countTotal.

As per my code its showing NaN

Please help me

You can se my code below or you can also check fiddle here

HTML

<div class="brochure"><table width="100%" border="0" cellspacing="0" cellpadding="10" >
  <tr>
    <td width="21%" align="center"><input type="checkbox" value="50" class="" name="radio"> 
    Rs. 50 </td>
    <td width="29%" align="center"><img src="images/thumb_brochure_singlepage_back.jpg" alt=" "></td>
    <td width="10%" align="center"><label for=" "></label>
      <input name=" 2" type="text" class="qty" id=" " maxlength="2"></td>
    <td width="40%" align="center" class="count">&nbsp;</td>
  </tr>
  <tr>
    <td align="center"><input type="checkbox" value="75" class="" name="radio5">
Rs. 75 </td>
    <td align="center"><img src="images/thumb_brochure_singlepage_front.jpg" width="50" height="117" alt=" "></td>
    <td align="center"><input name=" 3" type="text" class="qty" id=" 2" maxlength="2"></td>
    <td align="center" class="count">&nbsp;</td>
  </tr>
  <tr>
    <td align="center"><input type="checkbox" value="100" class="" name="radio6">
Rs. 100 </td>
    <td align="center"><img src="images/thumb_brochure_singlepage_front.jpg" width="50" height="117" alt=" "></td>
    <td align="center"><input name=" 4" type="text" class="qty" id=" 3" maxlength="2"></td>
    <td align="center" class="count">&nbsp;</td>
  </tr>
  <tr>
    <td align="center"><input type="checkbox" value="125" class="" name="radio7">
Rs. 125 </td>
    <td align="center"><img src="images/thumb_brochure_singlepage_back.jpg" alt=" "></td>
    <td align="center"><input name=" 6" type="text" class="qty" id=" 4" maxlength="2"></td>
    <td align="center" class="count">&nbsp;</td>
  </tr>
  <tr>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center">Total</td>
    <td align="center" class="countTotal">&nbsp;</td>
  </tr>
              </table>
</div>

SCIRPT

$('.sticker input.qty, .brochure input.qty').prop('disabled', true);

        var total;
        var price = 0;
        var qty; 
        var prPrice = 0;
        var i = 0;
        var prPricemain = 0;
$('.sticker input[type="checkbox"], .brochure input[type="checkbox"]').on('change',function(){

    if($(this).is(':checked'))
    {

        var val = $(this).attr('value');
        $(this).closest('tr').find('input.qty').prop('disabled', false);        
        $(this).closest('tr').find('input.qty').val('1');
        $(this).closest('tr').find('.count').text(val);



        $(this).closest('tr').find('input.qty').on('keyup',function(){
            qty = $(this).val();
            prPrice = qty * val;
            $(this).closest('tr').find('.count').text(prPrice);

            })

        }
    else
    {

        $(this).closest('tr').find('input.qty').prop('disabled', true);     
        $(this).closest('tr').find('input.qty').val('');

            $(this).closest('tr').find('.count').text('');

        }




        $(this).closest('table').find('.count').each(function() {

            prPricemain = parseInt($(this).html());
            prPricemain = prPricemain + prPrice


        });

            $(this).closest('table').find('.countTotal').text(prPricemain);

    })


$('.qty').keyup(function(e)
{
    if (/\D/g.test(this.value))
    {
        alert('Numbers Only')
        this.value = this.value.replace(/\D/g, '');
    }
});

mayank chaturvedi · Accepted Answer · 2014-05-07 12:31:47Z

use this Html

<div class="brochure"><table width="100%" border="0" cellspacing="0" cellpadding="10" >
  <tr>
    <td width="21%" align="center"><input type="checkbox" value="50" class="" name="radio"> 
    Rs. 50 </td>
    <td width="29%" align="center"><img src="images/thumb_brochure_singlepage_back.jpg" alt=" "></td>
    <td width="10%" align="center"><label for=" "></label>
      <input name=" 2" type="text" class="qty" id=" " maxlength="2"></td>
    <td width="40%" align="center" class="count">&nbsp;</td>
  </tr>
  <tr>
    <td align="center"><input type="checkbox" value="75" class="" name="radio5">
Rs. 75 </td>
    <td align="center"><img src="images/thumb_brochure_singlepage_front.jpg" width="50" height="117" alt=" "></td>
    <td align="center"><input name=" 3" type="text" class="qty" id=" 2" maxlength="2"></td>
    <td align="center" class="count">&nbsp;</td>
  </tr>
  <tr>
    <td align="center"><input type="checkbox" value="100" class="" name="radio6">
Rs. 100 </td>
    <td align="center"><img src="images/thumb_brochure_singlepage_front.jpg" width="50" height="117" alt=" "></td>
    <td align="center"><input name=" 4" type="text" class="qty" id=" 3" maxlength="2"></td>
    <td align="center" class="count">&nbsp;</td>
  </tr>
  <tr>
    <td align="center"><input type="checkbox" value="125" class="" name="radio7">
Rs. 125 </td>
    <td align="center"><img src="images/thumb_brochure_singlepage_back.jpg" alt=" "></td>
    <td align="center"><input name=" 6" type="text" class="qty" id=" 4" maxlength="2"></td>
    <td align="center" class="count">&nbsp;</td>
  </tr>
  <tr>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center">Total</td>
    <td align="center" class="countTotal">&nbsp;</td>
  </tr>
              </table>
</div>

Jquery

$('.sticker input.qty, .brochure input.qty').prop('disabled', true);

        var total;
        var price = 0;
        var qty; 
        var prPrice = 0;
        var i = 0;
        var prPricemain = 0;
$('.sticker input[type="checkbox"], .brochure input[type="checkbox"]').on('change',function(){

    if($(this).is(':checked'))
    {

        var val = $(this).attr('value');
        $(this).closest('tr').find('input.qty').prop('disabled', false);        
        $(this).closest('tr').find('input.qty').val('1');
        $(this).closest('tr').find('.count').text(val);



        $(this).closest('tr').find('input.qty').on('keyup',function(){
            qty = $(this).val();
            prPrice = qty * val;
            $(this).closest('tr').find('.count').text(prPrice);

            })

        }
    else
    {

        $(this).closest('tr').find('input.qty').prop('disabled', true);     
        $(this).closest('tr').find('input.qty').val('');

            $(this).closest('tr').find('.count').text('');

        }


         prPrice = 0;

        $(this).closest('table').find('.count').each(function() {

            prPricemain = parseInt($(this).html());

            if($(this).html()=="&nbsp;")
            {
            prPricemain=0;
            }else
            {

            prPrice = prPrice + prPricemain
            }


        });

            $(this).closest('table').find('.countTotal').text(prPrice);

    })


$('.qty').keyup(function(e)
{
    if (/\D/g.test(this.value))
    {
        alert('Numbers Only')
        this.value = this.value.replace(/\D/g, '');
    }});
$('.qty').blur(function(e)
{
prPrice=0;
    $(this).closest('table').find('.count').each(function() {

            prPricemain = parseInt($(this).html());

            if($(this).html()=="&nbsp;")
            {
            prPricemain=0;
            }else
            {

            prPrice = prPrice + prPricemain
            }


        });
        $(this).closest('table').find('.countTotal').text(prPrice);
});

http://jsfiddle.net/UmcvP/1/

dklingman · Accepted Answer · 2014-05-07 11:18:58Z

Your problem has to do this the following code

$(this).closest('table').find('.count').each(function () {

    prPricemain = parseInt($(this).html());
    prPricemain = prPricemain + prPrice


});

$(this).html() is blank and therefore will return NaN.

I've changed the code to the following

prPricemain = 0;
$(this).closest('table').find('.count').each(function () {

    if ($.trim($(this).text()) && !isNaN($(this).text())) {
        prPrice = parseInt($(this).html());
        prPricemain = prPricemain + prPrice
    }

});

The reason for the change is not only were you getting the NaN for the total but your total would have continued to calculate up and never back down.

My jsFiddle

UPDATE

In that case create a custome event to trigger when you want the calculation performed.

$('.sticker input[type="checkbox"], .brochure input[type="checkbox"]').on('change', function () {

    if ($(this).is(':checked')) {

        var val = $(this).attr('value');
        $(this).closest('tr').find('input.qty').prop('disabled', false);
        $(this).closest('tr').find('input.qty').val('1');
        $(this).closest('tr').find('.count').text(val);



        $(this).closest('tr').find('input.qty').on('keyup', function () {

            qty = $(this).val();
            prPrice = qty * val;
            $(this).closest('tr').find('.count').text(prPrice);
            //Call the calculation event
            $(this).closest('table').find('input[type="checkbox"]').trigger('calculateTotal');
        })

    } else {

        $(this).closest('tr').find('input.qty').prop('disabled', true);
        $(this).closest('tr').find('input.qty').val('');

        $(this).closest('tr').find('.count').text('');

    }

    //Call the calculation event
    $(this).trigger('calculateTotal');
}).on('calculateTotal', function (e) {
    prPricemain = 0;
    $(this).closest('table').find('.count').each(function () {

        if ($.trim($(this).text()) && !isNaN($(this).text())) {
            prPrice = parseInt($(this).html());
            prPricemain = prPricemain + prPrice
        }

    });

    $(this).closest('table').find('.countTotal').text(prPricemain);
});

Updated jsFiddle

thanks for help... Ok i got it .. but what if I update quantity.. amount should be also change when I change quantity

Collectives™ on Stack Overflow

Simple calculation using jQuery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related