提问者:小点点

向购物车jquery函数添加项目


我的php通过echo在最后创建每个产品是

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

网站上通常动态创建10个产品

所以我为php显示的每个产品都有10个具有相同类或id的按钮

任何关于函数通过post(jquery)将数据发送到cart.php文件而不刷新网站的想法。我必须在$_POST中发送正确的产品id,以便cart.php知道添加了什么。

为什么当我加上

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

它正在工作,只警告第一个按钮添加到购物车,而不是全部

我是jQuery的新手:)请帮助


共2个答案

匿名用户

听起来像是在寻找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
            }
        });
    });
});

匿名用户

不能有多个元素具有相同的id。尝试添加一个,

<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://jsfidle.net/meqy5/1/