On click display data in table using jquery

Question

I am doing a little job in jquery. So my problem is when i click on the anchori get the data and display it in a table using append() .

But again click on the same anchor it duplicate the record. but i do not want to duplicate it just increment 1 value.

Php code is

<?php
    foreach ($product_data as $prod_items) {
?>
<a href="#"class="list-group-item product" data-name="<?=$prod_items['itemname'] ?>" data-price="<?= $prod_items['sellingprice'] ?>">     <?= $prod_items['itemname'] ?> </a>

<?php {
?>

My code is

$('.product').click(function () {

            var name = $(this).attr('data-name');
            var price = $(this).attr('data-price');
            var qty = 2;
            var amount = parseFloat(price)  * parseFloat(qty);

            $(".cat_table").append('<tr><td>' + name + '</td><td>' + price +  '</td><td>' + qty + '</td><td>' + amount + '</td></tr>');


            return false;
        });

Thank you.

Can you share executable demo/snippet or JSFiddle ? Create a Minimal, Complete, and Verifiable example — Rayon
– Rayon, Commented Sep 27, 2016 at 6:53

Beginner · Accepted Answer · 2016-09-27 10:06:46Z

1

just unbind it's click event after it execute inorder for it to not click again and avoid duplicate record

DEMO

you just add

$(this).unbind('click');

after you append data into the table

you should declare qty outside the function so that it's value will not reset everytime your event click execute

var qty = 1;
$('.product').click(function () {

    var name = $(this).attr('data-name');
    var price = $(this).attr('data-price');
    var amount = parseFloat(price)  * parseFloat(qty);

    $(".cat_table").append('<tr><td>' + name + '</td><td>' + price +  '</td><td>' + qty + '</td><td>' + amount + '</td></tr>');

    $(this).unbind('click');

    alert(qty);

    qty++; // to increment you qty every time you click

    return false;
});

edited Sep 27, 2016 at 10:06

answered Sep 27, 2016 at 8:43

Beginner

4,1183 gold badges19 silver badges27 bronze badges

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

1 Comment

Shaban Over a year ago

Great. But i want to increment a value of qty on each click. your answer solve the first part of my problem but not the second :-(

Dave · Accepted Answer · 2016-09-27 06:59:52Z

0

try this,

$('.product').click(function () {    
              var name = $(this).attr('data-name');
              var price = $(this).attr('data-price');
              var qty = 2;
              var amount = parseFloat(price)  * parseFloat(qty);
              $(".cat_table").empty();
              $(".cat_table").append('<tr><td>' + name + '</td><td>' + price +  '</td><td>' + qty + '</td><td>' + amount + '</td></tr>');
              return false;
        });

DEMO

answered Sep 27, 2016 at 6:59

Dave

3,0917 gold badges22 silver badges33 bronze badges

2 Comments

Shaban Over a year ago

I am working in a loop. So there are also other values which can be add. So i do not want to empty the table first and add new value. what i want is it should append new values but not the old one which already added. if the value exists it should increment it not duplicate it.

Shaban Over a year ago

<?php foreach ($product_data as $prod_items) { ?> <a href="#"class="list-group-item product" data-name="<?= $prod_items['itemname'] ?>" data-price="<?= $prod_items['sellingprice'] ?>"><?= $prod_items['itemname'] ?>

Ashish Ranade · Accepted Answer · 2016-09-27 07:01:06Z

0

You need to declare your variables outside the click function, so that they are treated as global and does not loose their value until page is reloaded. Hope this will help you.

<script>

            var qty = '';
            var amount = parseFloat(price)  * parseFloat(qty);
$('.product').click(function () {

            var name = $(this).attr('data-name');
            var price = $(this).attr('data-price');
    qty = qty + 2;
        amount = amount + parseFloat(price)  * parseFloat(qty);

            $(".cat_table").append('<tr><td>' + name + '</td><td>' + price +  '</td><td>' + qty + '</td><td>' + amount + '</td></tr>');


            return false;
        });
</script>

edited Sep 27, 2016 at 7:01

answered Sep 27, 2016 at 6:55

Ashish Ranade

6053 silver badges14 bronze badges

8 Comments

vijayP Over a year ago

this is like comment and not the answer.

Rayon Over a year ago

@AshishRanade — "A good developer understand a good comment and its value", we are not that good developers Sir.

Rayon Over a year ago

$('.product') appears <tr> to me, How will you get the data-* attributes without knowing the this context ? How will having them global will help ?

Ashish Ranade Over a year ago

Yes, I came to know that now :)

vijayP Over a year ago

@AshishRanade - i don't think the description provided by OP is that much sufficient. So by providing answer will just eat up OP's more time.

|

Collectives™ on Stack Overflow

On click display data in table using jquery

3 Answers 3

1 Comment

2 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related