Question

我的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;
    });
});

它正在努力警告第一个按钮ADD到CART并非所有

我是jquery的新手:)请帮助

Answer 1

您不能拥有多个具有相同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/

Answer 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
            }
        });
    });
});

将项添加到购物车jquery功能

2 个答案: