提交AjaxForm时确定一个特定的按钮

Question

I'm using Django and AjaxForm to submit a form(s) that adds an item to a user's "cart". I have multiple items listed on the page, each with it's own "add to cart" button. Upon clicking a specific "add to cart" button, I use Ajax to add the item to the user's "cart" and display it in their "cart" at the top of the screen. Users can also delete an item from their cart by clicking on a given item in the cart.

I would now like to change the appearance of the "add to cart" button once it has been clicked, but I am having trouble identifying only the specific button that was clicked (and not all of the 'add to cart' buttons). How can I identify which 'add to cart' button was clicked. I added an 'id' field to my html button and have been trying to use that but have been unsuccessful....??

I have tried many different things but either they are not working or I am putting them in the wrong spot. For example, I have tried:

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

And also:

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

Any ideas on how I can find the specifc button that was clicked so I can update the button's appearance???

My 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 %}

My 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

Change the button type to 'button', and then add onClick="addToCartFunction(this);"

then in the addToCarFunction, this.id will be your item id your adding?, or you can use data-attributes to add more item details for the function to get.

if you then need to send information to the server to cache the cart, use a $.ajax jQuery call to the server.

Answer 2

Based on your comments, you ought to be able to drop your onClick function into a script tag at the end of your HTML page and have it function as intended (though your javascript should actually all be in a separate file that gets referenced via a script tag).

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