提交 AjaxForm 时识别特定按钮

Question

我正在使用 Django 和 AjaxForm 提交一个向用户的 "cart" 添加项目的表单。我在页面上列出了多个项目，每个项目都有自己的 "add to cart" 按钮。单击特定的 "add to cart" 按钮后，我使用 Ajax 将项目添加到用户的 "cart" 并将其显示在屏幕顶部的 "cart" 中。用户还可以通过单击购物车中的给定商品从购物车中删除商品。

我现在想在单击 "add to cart" 按钮后更改它的外观，但我无法仅识别被单击的特定按钮（而不是所有 'add to cart' 纽扣）。如何确定单击了哪个 'add to cart' 按钮。我在我的 html 按钮中添加了一个 'id' 字段，并且一直在尝试使用它但没有成功....？？

我尝试了很多不同的方法，但要么它们不起作用，要么我把它们放在了错误的位置。比如我试过：

$('.add-to-cart').on('click',function(){
    var id = $(this).attr("id");
    console.log("ID: ");
    console.log(id);
});

还有：

var addButtonID;
    $(this).find('input[type=submit]').click(function() {
        addButtonId = this.id;
        console.log("ID: ");
        console.log(addButtonId)
    )};

关于如何找到被单击的特定按钮以便更新按钮外观的任何想法？？？

我的html:

{% for item in item_list %}             
    <form class="add-to-cart" action="/item/add/{{ item.id }}/" method="post" enctype="application/x-www-form-urlencoded">
    <ul>
        <li style="display: block"><button class="addItemButton2" type="submit" id="{{ item.id }}">Add to Cart</button></li>
    </ul>
    </form>
{% endfor %}

我的javascript:

function remove_form_errors() {
    $('.errorlist').remove();
}
function show_hide_cart(){
    var cart = $('#cart');
    var message = $('#message');
    if (cart.find('li').length >= 1){
        cart.show();
        continueButton.show();
        message.hide();
    }
    else {
        cart.hide();
        continueButton.hide();
        message.show();
    }
}

function process_form_errors(json, form)
{
    remove_form_errors();

    var prefix = form.data('prefix'),
    errors = json.errors;
    if (errors.__all__ !== undefined) {
        form.append(errors.__all__);
    }
    prefix === undefined ? prefix = '' : prefix += '-';
    for (field in errors)
    {
        $('#id_' + prefix + field).after(errors[field])
        .parents('.control-group:first').addClass('error');
    }
}
function assign_remove_from_cart() {
    var cart = $('#cart');
    $('.remove-from-cart').on('click', function(e) {
        e.preventDefault();
        $.get(this.href, function(json) {
            remove_form_errors();
            cart.find('a[href$="' + json.slug + '/"]').parent('li').remove();
            show_hide_cart();
        });
    });
}
(function($){
    $(function() {
        var cart = $('#cart'),
            message = $('#message');
            continueButton = $('#continueButton');  

        assign_remove_from_cart();
        // ajax-enable the "add to cart" form
        $('.add-to-cart').ajaxForm({
            dataType: 'json',
            url: this.action,
            success: function(json, status, xhr, form) {
                if (json.errors !== undefined) {
                    // display error message(s)
                    process_form_errors(json, form);
                }
                else if(json.id == -1){
                    // duplicate, do nothing
                    console.log("json.id:%s:json.slug:%s", json.id, json.slug)
                }
                else {
                    // Hide any previously displayed errors
                    remove_form_errors();
                    // compile cart item template and append to cart
                    var t = _.template($('#cart-item-template').html());
                    $('#cart').append(t(json));
                    show_hide_cart();
                    assign_remove_from_cart();
                }
            }
        });
    });
})(jQuery);

Answer 1

将按钮类型更改为'button'，然后添加onClick="addToCartFunction(this);"

然后在 addToCarFunction 中，this.id 将是您添加的商品 ID？或者您可以使用数据属性为要获取的函数添加更多商品详细信息。

如果您随后需要向服务器发送信息以缓存购物车，请使用 $.ajax jQuery 调用服务器。

Answer 2

根据您的评论，您应该能够将 onClick 函数放入 HTML 页面末尾的脚本标记中，并使其按预期运行（尽管您的 javascript 应该实际上都在一个单独的文件中，通过脚本标签引用）。

$( document ).ready(function(){ 
    $('.add-to-cart :submit').on('click',function(){ 
        var id = this.id; 
        console.log("ID: ",id); 
        //do something with your ID here, such as calling a method to restyle your button
        $('#' + id).css("attribute","new value");
        //or
        $('#' + id).addClass("yourClassName");
    }); 
});

提交 AjaxForm 时识别特定按钮

Identifying a Specific Button when Submitting AjaxForm(s)

javascript

django

ajax

jquery