項目添加到購物車jQuery函數

我的PHP通過回聲在年底創建的每個產品項目添加到購物車jQuery函數

<form name="addToCartForm"> 
<input type="hidden" id="inputid" value="'.$id.'"/> 
<input type="submit" id="submitbutton" value="Add to cart"/> 
</form>

的網站通常會創建10個產品動態地

所以我有相同的class和id 10個按鈕上爲每個產品顯示由php

任何想法的功能發送數據cart.php文件通過郵政（jquery）沒有刷新網站。我必須在$ _POST中發送正確的產品ID，以便cart.php知道已添加的內容。

及爲什麼當我加入

$(document).ready(function(e) { 
    $('#submitbutton').click(function(e) { 
     var pos = $('#inputid').val(); 
     alert(pos); 
     return false; 
    }); 
});

它正在提醒只是第一個按鈕添加到購物車並不是所有

我是新來的jQuery：），請幫助

來源

2012-11-04 konik

*「所以我有相同的類或ID是10個鍵」 * 。你不能有多個具有相同'id'的元素。這並不是如何使用'id'屬性。 – Blender

表單中的每個ID都必須是UNIQUE。另外，使用$ .ajax（）發送數據而不刷新整個頁面。 – Ringo

這聽起來像你要找的AJAX功能。幸運的是，jQuery有一個用於AJAX調用的函數，在http://api.jquery.com/jQuery.ajax/中有描述。

然後，您可以編寫一些代碼如下：

$(document).ready(function() { 
    $('#submitbutton').click(function() { 
     var pos = $('#inputid').val(); 
     $.ajax({ 
      url: "cart.php", 
      type: "POST", 
      data: {itemID: pos}, 
      success: function(data) { 
       // Do stuff when the AJAX call returns 
      } 
     }); 
    }); 
});

然而，有一個缺陷與此有關。如果您要在同一頁面上有多個提交按鈕，則不能爲所有這些按鈕使用相同的ID。這是更好地給所有字段的類，如下所示：

<form name="addToCartForm"> 
    <input type="hidden" class="inputid" value="'.$id.'"/> 
    <input type="submit" class="submitbutton" value="Add to cart"/> 
</form>

你最終的Javascript代碼看起來像這樣：

$(document).ready(function() { 
    $('.submitbutton').click(function() { 
     var pos = $(this).parent().find('.inputid').val(); 
     $.ajax({ 
      url: "cart.php", 
      type: "POST", 
      data: {itemID: pos}, 
      success: function(data) { 
       // Do stuff when the AJAX call returns 
      } 
     }); 
    }); 
});

來源

2012-11-04 04:20:28 zongweil

你不能有多個相同的元素id。嘗試添加class這樣的事情，

<form name="addToCartForm"> 
    <input type="hidden" id="inputid_1" class="inputid" value="'.$id.'"/> 
    <input type="submit" id="submitbutton_1" class="submitbutton" value="Add to cart"/> 
</form>

JS代碼應該是，

$(document).ready(function(e) { 
    $('.submitbutton').click(function(e) { 
    var pos = $(this).parent().find('.inputid').val(); 
    alert(pos); 
    //Do your AJAX call here to send data to server. 
    return false; 
    }); 
});

演示：http://jsfiddle.net/meqY5/1/

來源

2012-11-04 04:15:21

不錯，但如何將所有數據發送到服務器？在一個AJAX中，並沒有問題具有相同的名稱屬性？ –

項目添加到購物車jQuery函數

回答

相關問題