Get Ajax variable from the PHP foreach loops (part II)

Question

Due to dianuj's great help I solved my Ajax looping issue yesterday. Click here!

The solution helps me to send and get quantity variable (class="qty") every time I change the number in the input area.

Now I want to revise my Ajax and PHP loop a little bit to get the "total" variable (the quantity * the price). I try to get the "price" variable by puting an "hidden" input area with price values.(please see the following script attached).The script get the variable of quantity (class="qty") and price (class="price") without problem.

However, when I put different quantity the script only picks the very first price and multiplies my changed quantity number.

For example, I have three items in the function with three differnt prices: 1. apple $1 x1 2. orange $10 x3 3. banana $2 x4

the script result will show $1 * (2+3+4) instead the correct $1*2+$10*3+$2*4 (the ajax script still gets the variable of price and quantity without problem).

My Ajax and PHP loops are as follows, it seems they can get and send the qty and price variable without problem (but only the fixed price of the very first item):

<script language="JavaScript">
$(document).ready(function() {
       $("form").mouseleave( function() {

 //get qty value and price value from the loop

var totalVal =0;
$( ".qty" ).each(function() {
  totalVal += ($(this).val()*$(".price").val()); 
});      

      // get 
        $.ajax({
        type: 'GET',
        url:  'getSunBody.php',
        data: { 
              //sent the total variable to php script (xml)
              total : totalVal,
                 }, 
        success: function(data) {
           // get XML value
           $('#result').html($(data).find('total').text()); 
           $('#result1').html($(data).find('caution').text());   

        } 
      });    
      return false;
   });

   });
</script> 
</head>

<body>
<div id="display">
<form action="sessionCartUpdate.php">
<table width="780" border="0" align="center" cellpadding="4" cellspacing="0">
<?php
foreach( $_SESSION["psn"] as $i => $data ){
?>

<input type="hidden" name="psn" value="<?php echo $_SESSION["psn"][$i];?>">
<tr>
  <td bgcolor="#CCCCCC" font color="black"><?php echo $_SESSION["psn"][$i];?></td>
  <td bgcolor="#CCCCCC"><?php echo $_SESSION["pname"][$i];?></td>
  <td bgcolor="#CCCCCC"><?php echo $_SESSION["price"][$i];?></td>
  <td bgcolor="#CCCCCC"><input type="text" class="qty" name="qty[]" value="<?php echo $_SESSION["qty"][$i];?>"></td>

    <input type="hidden" class="price" value="<?php echo $_SESSION["price"][$i];?>" >

  <td bgcolor="#CCCCCC"><input type="submit" name="btnUpdate" value="update" />
      <input type="submit" name="btnDelete" value="delete" />
      </td>
</tr><br />

<?php
}
?>
<tr><td colspan="5" align="center">the total:<div id="result" class="box" style="height=350px;"></div><div id="result1" class="box" style="height=350px;"></div>
<div id="result2" class="box" style="height=350px;"></div></td></tr>
</table>
</form>

I also include my php script as follows serving as xml for the ajax script above:

<?php
// XML
header("Content-Type: text/xml");
header("Content-Type:text/html; charset=utf-8");

//get total value ("qty * price") from the ajax

$total = (isset($_POST["total"]) ) ? $_POST["total"] : $_GET["total"];

echo "<?xml version=\"1.0\" ?>";

echo "<caculation>"; 

echo "<total>" . $total . "</total>";


if ($total==0)
    echo "<caution>"."please put number!"."</caution>";
    else if ($total<=500)
    echo "<caution>"."You should buy more!"."</caution>";
    echo "";

echo "</caculation>";

?>

I would be very grateful you could offer invaluble advice to help me fix the above bug!

M Khalid Junaid · Accepted Answer · 2013-08-10 21:05:23Z

0

There is a problem the .each loop is for qty not for the price so it is picking the first price because the loop is for qty not for the price you should do something like this

<script language="JavaScript">
$(document).ready(function() {
       $("form").mouseleave( function() {

 //get qty value and price value from the loop

var totalVal =0;
$( ".qty" ).each(function(i) {
  totalVal += ($(this).val()*$(".price:eq("+i+")").val()); 
});      

      // get 
        $.ajax({
        type: 'GET',
        url:  'getSunBody.php',
        data: { 
              //sent the total variable to php script (xml)
              total : totalVal,
                 }, 
        success: function(data) {
           // get XML value
           $('#result').html($(data).find('total').text()); 
           $('#result1').html($(data).find('caution').text());   

        } 
      });    
      return false;
   });

   });
</script>

Use the index of .each loop and get the price placed at that index i have used the jquery selector :eq(index here) and i believe there will be price value for each quantity

answered Aug 10, 2013 at 21:05

M Khalid Junaid

64.6k10 gold badges93 silver badges120 bronze badges

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

2 Comments

Peter Ren Over a year ago

I am very very grateful for your prompt and powerful solution which always rid off my headaches overnight! Sincerely thankfulness to Mr Dianuj!

M Khalid Junaid Over a year ago

@PeterRen kindly read this :) meta.stackexchange.com/questions/17878/… and you are welcome

Anders · Accepted Answer · 2013-08-10 21:11:51Z

0

I haven't confirmed the following code, but it should at least get you on the right track

var totalVal =0;
$('.qty').each(function() {
    var price = $(this).closest('tr').find('.price').val();
    totalVal += ($(this).val()*price);
});

edited Aug 10, 2013 at 21:11

answered Aug 10, 2013 at 21:08

Anders

4991 gold badge5 silver badges18 bronze badges

1 Comment

Peter Ren Over a year ago

Thank you very much Mr Anders for this kind sugggestion too!

Collectives™ on Stack Overflow

Get Ajax variable from the PHP foreach loops (part II)

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related