how to get value of input type from dynamic table using jquery

Question

I am working on ecommerce website.

My table gets value from session. It looks like :

On Checkout I want to get all the values of table.

I have used jquery for this.

Here is my code:

<script>
$('#chhk').on('click',function(e) {
                    e.preventDefault();
                    alert('click');
                var table = $("#tbl tbody");

                 table.find('tr').each(function (i, el) {
                    var $tds = $(this).find('td'),
                        product = $tds.eq(2).text(),
                        price = $tds.eq(3).text(),
                        quantity = $tds.eq(4).attr('value'),
                        total = $tds.eq(5).text();

                     alert('Row ' + (i + 1) + ':\nProduct: ' + product
                          + '\nPrice: ' + price
                           + '\nQuantity: ' + quantity
                          + '\nTotal: ' + total);
                });

            });
</script>

Here '#chhk' is checkout button id

'#tbl' is my table id

I am getting blank value of quantity by this script as it is input field

Any help would be appreciated..

score 1 · Answer 1 · edited May 23 '17 at 11:53

1

Try replace this:

                    quantity = $tds.eq(4).attr('value');

with:

                    quantity = $tds.eq(4).val();

As .attr('value') gives the value at the start, while .val() gives current property.

More info: jQuery .val() vs .attr("value")

edited May 23 '17 at 11:53

Community

1
1

answered Feb 24 '16 at 15:37

Ole Fredrik Borgundvåg Berg

88
6

I have tried this before but getting **quantity undefined.** – mohammad haris Feb 24 '16 at 15:41
kindly check my below answer and let me know if I can use quantity script with **.eq** syntax – mohammad haris Feb 24 '16 at 15:44
Seems like value is in the input tag, and not in the td tag you get through your .eq syntax. That means that you have to get the input tag out of the td tag. `quantity = $tds.eq(4).children("input").val();` might work. – Ole Fredrik Borgundvåg Berg Feb 24 '16 at 15:49
As I have mentioned earlier , it is dynamic table , so it is necessary that input type should be in td – mohammad haris Feb 24 '16 at 15:51
Try `quantity = $tds.eq(4).children("input").val();` if you want to keep your .eq syntax. – Ole Fredrik Borgundvåg Berg Feb 24 '16 at 15:53

score 1 · Answer 2 · answered Aug 09 '16 at 18:41

1

replace this:

 quantity = $tds.eq(4).attr('value'),

with

quantity = $tds.eq(4).find("input").val(),

answered Aug 09 '16 at 18:41

charu joshi

113
12

score 0 · Answer 3 · answered Feb 24 '16 at 15:40

well I tried to do it separately and am getting expected result.

$('#chhk').on('click',function(e) {
                e.preventDefault();
                alert('click');
            var table = $("#tbl tbody");

             table.find('tr').each(function (i, el) {
                var $tds = $(this).find('td'),
                    product = $tds.eq(2).text(),
                    price = $tds.eq(3).text(),
                    total = $tds.eq(5).text();
                    var qty = $(this).find('td input:first').val();

                 alert('Row ' + (i + 1) + ':\nProduct: ' + product
                      + '\nPrice: ' + price
                      + '\nTotal: ' + total
                      +'\n Qua:' + qty);
            });

        });

Have dealed quantity separately.

how to get value of input type from dynamic table using jquery

3 Answers3