Question

我有一个产品列表，每行都有一个＆＃34;添加到购物车按钮＆＃34;。该脚本适用于插入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;
    });
  });

Answer 1

您的代码中存在的问题是..您有多个具有相同ID的表单.. Ids应该始终是唯一的...（这就是为什么它被称为ID）：）..

使用课程.. 将所有ID更改为Class

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

Answer 2

尝试使用类而不是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/

jquery只插入第一行查询

2 个答案: