textboxes inside loop only first one returns value jquery php

Question

i need to put quantity for my products on my database. My products are displayed inside a foreach loop including the textbox for quantity. but only the first textbox is working. Can you please help me? Thanks a lot!

<div class="col-md-9 cartbox">
                <?php foreach($result as $row): ?>
                    <div class="col-md-12 smallbox">
                        <div class="col-md-3 item_in_box">
                            <div class="cart_img_div">
                                <img class="img-responsive prodimage" src="<?php echo $row['prod_image']; ?>">
                            </div>
                        </div>

                        <div class="col-md-3 item_in_box">
                            <div class="cart_prod_name" data-name="<?php echo $row['prod_name']; ?>">
                                <?php echo strtoupper($row['prod_name']); ?>
                            </div>
                        </div>

                        <div class="col-md-3 item_in_box">
                            Quantity: <input type="text" class="cart_txtquantity"/><br>
                            <input type="button" class="btn btn-warning updateqty" value="Update"/>
                        </div>

                        <div class="col-md-3 item_in_box">
                            <div class="cart_prod_price">
                                <input type="hidden" class="hidden_price" value="<?php echo $row['price']; ?>"
                                <b> PHP:</b> <?php echo $row['total_amount']; ?>
                            </div>
                        </div>
                    </div>

                <?php endforeach; ?>
            </div>

<script>
        $(document).ready(function () {

            $(".updateqty").click(function () {
                $.ajax ({
                    url: "../controller/order/updatequantity.php",
                    method: "POST",
                    data: {
                        prod_name: $(".cart_prod_name").attr('data-name'),
                        quantity: $(".cart_txtquantity").val(),
                        price: $(".hidden_price").val()
                    },
                    success: function(result) {
                        alert(result);
                    },
                    error: {
                        function(jqXHR, textStatus, errorThrown) {
                            console.log(errorThrown);
                        }
                    }
                });
            });

        });

    </script>

you are using class selectors, ie. $(".hidden_price").val(), so it will find the first, not the one related to your $(".updateqty") — Sean
– Sean, Commented Aug 8, 2015 at 18:26
sorry sir, but what should I do ? to get the value of quantity ? — Russel Escalderon Lobrio
– Russel Escalderon Lobrio, Commented Aug 8, 2015 at 18:29

Thomas F · Accepted Answer · 2015-08-08 18:40:19Z

When you are selecting the values for the ajax, you are searching the entire document for the classes cart_prod_name, cart_txt_quantity, and hidden_price. If you look look at the ajax result carefully, you will see that it is always the data from the first <div class=smallbox"> in the request. This is because when you call .val() on a jQuery selection of more then one object, it returns the value of the first selected object (the value from the first row).

So, to fix this, you need a context (subset of nodes in the DOM) for the query to search for the specific classes.

For example

$(document).ready(function(){

    $(".updateqty").click(function () {
        var context = $(this).parents('.smallbox');
        $.ajax ({
                ...
                data: {
                    prod_name: $(".cart_prod_name", context).attr('data-name'),
                    quantity: $(".cart_txtquantity", context).val(),
                    price: $(".hidden_price", context).val()
                },
                ...
        });
    });
});

Collectives™ on Stack Overflow

textboxes inside loop only first one returns value jquery php

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related