使用ajax循环while中的多个表单


Multiple forms in while loop with ajax

我有一个产品页面,其中的产品是从mysql动态创建的,还有"添加到购物车"按钮和每个项目的数量输入。这些项目是通过AJAX提交的。我可以提交正确的产品,但ajax返回的成功消息使用了一个隐藏的div,它隐藏了添加到购物车按钮,然后显示您的商品现在在购物车中的文本。它隐藏了所有的购物车按钮,并显示了隐藏的div,其中包含每个表单中的成功消息。如有任何帮助,我们将不胜感激!

我的PHP/HTML

//inside while loop
     ?>
     <div class="form">     
<form action="cart_action.php" method="post" name="form" id="form_<?php echo $item_no; ?>">
     <input type="hidden" class="text" name="order_code" value="<?php echo $item_no; ?>" id="order_code<?php echo $item_no; ?>" />
<input type="hidden" class="text" name="minorder" value="<?php echo $min; ?>" id="min_<?php echo $item_no; ?>" />
<br><br><div style="float:left; padding:5px;"><b>Qty</b>: <input class="text" type="text" name="quantity" value="<?php echo $min; ?>" size="3" id="quan_<?php echo $item_no; ?>" ?></div>
<div id="status"></div>
<input type="image" src="images/add_to_cart.png" class="psubmit" alt="submit" name="submit" id="submit_<?php echo $item_no; ?>" />
 </div><div class="added"><b><div style="color: rgb(85, 176, 90);"><br /><b>Added to Cart </b>(<a href="cart.php" class="gen">View Cart</a>)</div></b></div>          
</form>
    <?php    
    } //end loop

JAVASCRIPT:

    $(document).ready(function() {
$('form').submit(function(){    
// Catching the DOM element which trigger the event 
var $form = $(this);
            var orderCode = $form.find('input[name=order_code]');
    var quantity = $form.find('input[name=quantity]');
    var minOrder = $form.find('input[name=minorder]');

   if (quantity.val() == '') {
   quantity.addClass('hightlight');
   $form.find("#status").html('<font color="red">Please Enter A Quantity!</font>');
   return false;
} else quantity.removeClass('hightlight');
if (quantity.val() % minOrder.val()) {
quantity.addClass('hightlight');
$form.find("#status").html('<font color="red">Invalid Multiple!</font>');
return false;
} else quantity.removeClass('hightlight');

//organize the data properly
var data = 'order_code=' + orderCode.val() + '&quantity=' + quantity.val();
//disabled all the text fields
//$('.text').attr('disabled','true');
//show the loading sign
$('.loading').show();
//start the ajax
$.ajax({
//this is the php file that processes the data and send mail
url: "cart_action.php", 
//GET method is used
type: "GET",
//pass the data         
data: data,     
//Do not cache the page
cache: false,
//success
success: function (html) {              
//if process.php returned 1/true (send mail success)
if (html==1) {                  
//hide the form
                    $('.form').fadeOut('slow');                 
//show the success message
$('.added').fadeIn('slow');
//if process.php returned 0/false (send mail failed)
} else 
//hide the form
                 $('.form').fadeOut('slow');                    
//show the success message
                $('.added').fadeIn('slow');             
}       
});
//cancel the submit button default behaviours
return false;
e.preventDefault();
}); 

});

在成功处理程序中,将选择器更改为从$form:开始

$form.fadeOut('slow');
$form.children('.added').fadeIn('slow');