防止在将项目提交到购物车时重新加载页面

Prevent page reloading while submitting item to a cart.

本文关键字：新加载 加载 项目 提交 购物车      更新时间：2023-09-26

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

目前我正在使用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((来测试输出，就像我只得到了第一个产品的值，其余的都被忽略了使用循环的想法。请验证以上代码或建议其他解决方案。

这是小提琴*更新的

问题是我能够获得第一个产品的项目id，而不是第二个

使用event.prventdefault((来停止锚点标记的默认行为。

你需要这个关键字

更改

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();

最近

CCD_ 3在CCD_ 5上得到最接近的CCD_。

$(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
    });
});

Fiddle演示

$(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()添加到脚本中。

U使用此

    $(".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
    });
相关文章：