通过ajax将变量传递给php页面

通过ajax将变量传递给php页面

问题描述:

i've a problem when passwing values with ajax i have a plus and minus buttons and input when i use input it works well to pass the value but with plus or minus it not working it works only on one item and the other items take the same value of the first

 <button class="entry number-minus" data-id="<?=$cartRowID?> " type="button">&nbsp;</button>
 <input type="hidden" name="itemSizesList" value="<?=$itemSizeList?>" />
 <input id="itemid" type="hidden" name="submittedForm" value="<?=$cartItemdID?>_<?=$cartListCounter?>" />
 <input type="hidden" name="itemID" value="<?=encrypt_decrypt("encrypt",$cartItemdID)?>" />
 <input type="hidden" name="cartRowID" value="<?=encrypt_decrypt("encrypt",$cartRowID)?>" />
 <input class="entry number " name="newQty" data-id="<?=$cartRowID?>" value="<?=$cartItemQty?>" style="margin-top: 1px; width:44px"/>
 <button class="entry number-plus" data-id="<?=$cartRowID?>" type="button">&nbsp;</button>
 <input type="submit" class="button style-17" value="Remove" name="delete" />
 <input type="submit" class="button style-15" value="Update cart" name="update" />

ajax code:

// WHEN - IS CLICKED
 $(document).on('click', '.number-minus', function(){
            var rowid = $(this).data("id");
            var qty = $('.number').val();
            // edit_data(eachItemSize, "eachItemSize");

            $.ajax({
                url:"update.php?rowid="+rowid+"qty="+qty,
                method:"POST",
                data:{rowid:rowid , qty:qty},
                dataType:"text",
                success:function(data){
                    alert(data);
                }
            });
        });

        // WHEN + IS CLICKED
        $(document).on('click', '.number-plus', function(){
            var rowid = $(this).data("id");
            var qty = $('.number').val();
            // edit_data(eachItemSize, "eachItemSize");

            $.ajax({
                url:"update.php?rowid="+rowid+"qty="+qty,
                method:"POST",
                data:{rowid:rowid , qty:qty},
                dataType:"text",
                success:function(data){
                    alert(data);
                }
            });
        });

You are grabbing values by class, not by ID!

Therefore when you call var qty = $('.number').val();, you are probably getting the value of the first item, assuming that this is one row and that there are other rows with these fields too.

Update: okay, you have multiple forms. So, probably the easiest way to get the correct field of class .number using jQuery is probably using .parent() and .find():

var qty = $(this).parent().find('.number').val();

This assumes that .parent() will return the form element, and .find() checks only within that form.

HTML part:

I entered static value in data-id=12 for minus button & value=6 for class number. And i m getting alert values when minus button entered. If this is not solution then tell me what exactly it breaking..

<button class="entry number-minus" data-id="12" type="button">-</button>
 <input type="hidden" name="itemSizesList" value="" />
 <input id="itemid" type="hidden" name="submittedForm" value="" />
 <input type="hidden" name="itemID" value="" />
 <input type="hidden" name="cartRowID" value="" />
 <input class="entry number " name="newQty" data-id="" value="6" style="margin-top: 1px; width:44px"/>
 <button class="entry number-plus" data-id="" type="button">+</button>
 <input type="submit" class="button style-17" value="Remove" name="delete" />
 <input type="submit" class="button style-15" value="Update cart" name="update" />

Script part:

$(document).on('click', '.number-minus', function(){

            var rowid = $(this).data("id");
            var qty = $('.number').val();
            // edit_data(eachItemSize, "eachItemSize");
            alert(rowid);
            alert(qty);
            $.ajax({
                url:"update.php?rowid="+rowid+"qty="+qty,
                method:"POST",
                data:{rowid:rowid , qty:qty},
                dataType:"text",
                success:function(data){
                    alert(data);
                }
            });
        });