0

我有一个产品列表，每一行都有一个“添加到购物车按钮”。该脚本在插入 art.code 和项目数并返回响应的第一行中运行良好。如果我在列表下方按另一篇文章，则脚本不起作用。我在另一个问题的某处读到 id 需要是唯一的，但我真的不知道如何在我的脚本中实现它。

<form method='post' action='search.php'>
 <input type='hidden' id='cartart' name='cartart' value='".$artno."' />
 <input id='cartantal' type='number' name='cartantal'value='".$number."' />
 <input type='submit' name='submit' id='submit' value='add'/>
 </form>

<span id='result'></span>

等等...

$(function() {
    $("#submit").click( function(){

        var namn = $('#cartart').val();
        var antal = $('#cartantal').val();

        $.ajax({
            url: "search.php",
            type: "POST",
            data: 'gui_artkod=' + namn + '&gui_antal=' + antal,

            success: function(result){
                $("#result").html(result);
            }
        });
        return false;
    });
  });
4

2 回答 2

1

您在代码中遇到的问题是您有多个具有相同 ID 的表单。ID 应该始终是唯一的（这就是它被称为 ID 的原因）。

将所有 ID 更改为类：

<form method='post' action='search.php'>
 <input type='hidden' class='cartart' name='cartart' value='".$artno."' />
 <input class='cartantal' type='number' name='cartantal'value='".$number."' />
 <input type='submit' name='submit' class='submit' value='add'/>

JavaScript：

$(function() {
  $(".submit").click( function(){  //use class selector

    var namn = $(this).parent().find('.cartart').val();  //finds the parent of the clicked button  and search for a class called cartart and gets the value 
    var antal = $(this).parent().find('.cartantal').val();

    $.ajax({
        url: "search.php",
        type: "POST",
        data: 'gui_artkod=' + namn + '&gui_antal=' + antal,

        success: function(result){
            $("#result").html(result);
        }
    });
    return false;
  });
});
于 2012-12-04T09:56:47.130 回答
0

尝试使用类而不是 id 选择器。

HTML 中的更改：在提交按钮上添加了一个类

<form method='post' action='search.php'>
 <input type='hidden' id='cartart' name='cartart' value='".$artno."' />
 <input id='cartantal' type='number' name='cartantal'value='".$number."' />
 <input type='submit' name='submit' class='addToShoppingCart' value='add'/>
 </form>

Javascript 更改：更改了提交按钮的选择器。

$(function() {
    $(".addToShoppingCart").click( function(){

  ...rest remains same
});

您甚至可以使用.on(). 在此处查看文档：http: //api.jquery.com/on/

于 2012-12-04T09:53:07.700 回答