Get Ajax variable from the PHP foreach loops

Question

I have a simple ajax (jquery version) script and very short php function and they works fine without problem. When I submit the value from the form input are, the ajax will work to send and get result from the php script, in this case to get a total amount of the book order. The Ajax script and html section are as follows:

     <script language="JavaScript">
   $(document).ready(function() {
   $("form").mouseout( function() {
      // get field value

      var qtyVal = $('#qty').val();
      // use HTTP GET get ajax 
        $.ajax({
        type: 'GET',
        url:  'getSunBody.php',
        data: { qty : qtyVal,
                 }, 
        success: function(data) {
           //get xml value
                    $('#result').html($(data).find('qty').text()); 
           $('#result1').html($(data).find('caution').text());   

        } 
      });    
      return false;
   });
});
</script>


<body>
Total price:<div id="result" class="box" style="height=350px;"></div><div id="result1" class="box" style="height=350px;"></div>
<form>
  <p>
    <label>quantity: </label>
    <input type="text" id="qty" name="qty"/> 
    <br/>
       <input type="submit" value="submit">
    total price:</p>
  <p>&nbsp;</p>
</form>

And the following php script serving as xml also works fine with above ajax request:

<?php
// XML document
header("Content-Type: text/xml");
header("Content-Type:text/html; charset=utf-8");
// get field values
$qty = (isset($_POST["qty"]) ) ? $_POST["qty"] : $_GET["qty"];

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

echo "<datetime>"; 
echo "<qty>" . $qty*100 . "</qty>";

$total=$qty*100;
if ($total==0)
    echo "<caution>"."please input number!"."</caution>";
    else if ($total<=500)
    echo "<caution>"."you shoud buy more!"."</caution>";
    echo "";

echo "</datetime>";

?>

However when I combine the above scripts with my shopping cart foreach loops, it doesn't work and the ajax script failed to get variables from the form input area. I don't know if it is a variable scope issue (globals or local)? or anything else?

The following is the total script I would like to fixed with:

<script language="JavaScript">
$(document).ready(function() {
   $("form").mouseout( function() {
      // get value from the form

      var qtyVal = $('#qty').val();
      // get 
        $.ajax({
        type: 'GET',
        url:  'getSunBody.php',
        data: { qty : qtyVal,
                 }, 
        success: function(data) {
           // get XML value
           $('#result').html($(data).find('qty').text()); 
           $('#result1').html($(data).find('caution').text());   

        } 
      });    
      return false;
   });
});
</script>
</head>

<body>
<table border="1" align="center">
<tr>
  <th>no</th>
  <th>name</th>
  <th>price</th>
  <th>qty</th>
  <th>update</th>
</tr>
<?php
foreach( $_SESSION["psn"] as $i => $data ){
?>
<form action="sessionCartUpdate.php">
<input type="hidden" name="psn" value="<?php echo $_SESSION["psn"][$i];?>">
<tr>
  <td><?php echo $_SESSION["psn"][$i];?></td>
  <td><?php echo $_SESSION["pname"][$i];?></td>
  <td><?php echo $_SESSION["price"][$i];?></td>
  <td><input type="text" id="qty" name="qty" value="<?php echo $_SESSION["qty"][$i];?>"></td>
  <input type="submit" name="qty" 
  <td><input type="submit" name="btnUpdate" value="update" />
      <input type="submit" name="btnDelete" value="delete" />
      </td>
</tr>
</form>
<?php
}
?>
<tr><td colsan="5">total amount:<div id="result" class="box" style="height=350px;"></div><div id="result1" class="box" style="height=350px;"></div></td></td>
</table>
<p><a href="sessionProdList.php">continue to shop</a>
<p><a href="sessionCartToDb.php">Put your order</a>
</body>
</html>

I would be very grateful if anyone can offer kind or possible suggestion or advice? My goal is to put different number (variables) in the "input area" (name or id as "qty") throught the using of ajax to get a total amount of price and show the result in the div box (id="result" or "result1").

id is supposed to be unique id="qty" you can use class also — M Khalid Junaid
– M Khalid Junaid, Commented Aug 9, 2013 at 11:42

M Khalid Junaid · Accepted Answer · 2013-08-09 12:43:12Z

1

You should replace the id attribute with class because id is supposed to be unique in the dom and using class you can do a loop to get all quantities of the items in the cart

Another thing i have noticed that you have made the an individual form foreach item in the cart there should be one form having the multiple fields,also remove this line <input type="submit" name="qty" it doesent makes sense

<form action="sessionCartUpdate.php">
<?php
foreach( $_SESSION["psn"] as $i => $data ){
?>

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

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

<?php
}
?>
</form>

<script language="JavaScript">
$(document).ready(function() {
   $("form").mouseout( function() {
var qtyVal =0;
$( ".qty" ).each(function() {
  qtyVal =qtyVal + parseInt($(this).val()); 
});      
      // get 
        $.ajax({
        type: 'GET',
        url:  'getSunBody.php',
        data: { qty : qtyVal,
                 }, 
        success: function(data) {
           // get XML value
           $('#result').html($(data).find('qty').text()); 
           $('#result1').html($(data).find('caution').text());   

        } 
      });    
      return false;
   });
});
</script>

answered Aug 9, 2013 at 12:43

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

Wow, Amazing! It is an powerful and reliable solution! With your kind help my shopping cart now runs smoothly without any problem!

Peter Ren Over a year ago

Again, thank you very much for your effort and great solution!

Varun Kakumani · Accepted Answer · 2013-08-09 12:00:36Z

1

// get field values
$qty = (isset($_POST["qty"]) ) ? $_POST["qty"] : $_GET["qty"];

Instead of using both $_GET and $_POST, you can use $_REQUEST which will give data from either POST or GET.

edited Aug 9, 2013 at 12:00

answered Aug 9, 2013 at 11:52

Varun Kakumani

1171 silver badge18 bronze badges

1 Comment

Peter Ren Over a year ago

Thank you very much for this prompt answer!

Collectives™ on Stack Overflow

Get Ajax variable from the PHP foreach loops

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