2

我的 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 的按钮

关于通过邮寄（jquery）将数据发送到cart.php文件而不刷新网站的功能的任何想法。我必须在 $_POST 中发送正确的产品 ID，以便 cart.php 知道添加了什么。

为什么当我添加

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

它正在提醒第一个按钮添加到购物车不是全部

我是 jquery 的新手 :) 请帮忙

4

2 回答 2

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
            }
        });
    });
});
于 2012-11-04T04:20:28.367 回答
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/

于 2012-11-04T04:15:21.637 回答