将商品提交到购物车时，防止页面重新加载。

Question

我正在开发购物车 ，因此在向购物车中添加产品时需要防止页面重新加载 。

目前，我正在使用GET方法将产品提交到购物车

<a href="cart/add?itemid=101&itemcat=starter></a>

如您所见，我使用链接标记而不是表单。 我尝试使用此代码来防止页面重新加载

  $(document).ready(function(){
    $(".prod a").click(function(){

        var id = $(".prod").find('input[id=itemid]').val();
        var cat = $(".prod").find('input[id=itemcat]').val();

        alert('ID :' + id + '\n\rCAT :' + cat);
        return false; // reload stopped
    });
});

您可能已经注意到，我已经使用alert（）来测试输出，就像我只获得第一个乘积余数的值一样，而忽略了使用loop的想法。 请验证以上代码或提出其他解决方案。

这是小提琴 *更新

问题是我能够获得第一种产品的商品ID，而不是第二种

Answer 1

使用event.preventdefault（）停止anchor tag的默认行为。

您需要这个关键字

更改

var id = $(".prod").find('input[id=itemid]').val();
var cat = $(".prod").find('input[id=itemcat]').val();

至

您需要最接近的tr元素而不是.prod

ID选择器（“ #id”）

var id = $(this).closest('tr').find('#itemid').val();
var cat = $(this).closest('tr').find('#itemcat').val();

---

最近的

$(this).closest('tr')获取DOM最接近的tr元素。

---

$(document).ready(function () {
    $(".prod a").click(function (e) {
        e.PreventDefault(); //to stop default behavior of anchor tag
        //this refers to the current a element clicked .
        var id = $(this).closest('tr').find('#itemid').val();
        var cat = $(this).closest('tr').find('#itemcat').val();
        alert('ID :' + id + '\n\rCAT :' + cat);
        return false; // reload stopped
    });
});

小提琴演示

Answer 2

$(document).ready(function(){
$(".prod a").click(function(e){

    var id = $(".prod").find('input[id=itemid]').val();
    var cat = $(".prod").find('input[id=itemcat]').val();

    alert('ID :' + id + '\n\rCAT :' + cat);
    e.preventDefault();
    return false; // reload stopped
});
});

尝试将e.PreventDefault()添加到脚本中。

Answer 3

你用这个

    $(".prod a").click(function(event){
event.preventDefault();
        var id = $(".prod").find('input[id=itemid]').val();
        var cat = $(".prod").find('input[id=itemcat]').val();

        alert('ID :' + id + '\n\rCAT :' + cat);
        return false; // reload stopped

    });