jQuery Ajax call for buttons on a list

I have a list of data that i have in a view from an asp.net mvc application. It's a list of stock and I have two images (a plus and a minus) on the end of each row which will allow me to increase or decrease stock quantity. It works fine at present with a call to the mvc action but since the list is long I want to use jQuery and AJAX to have the call go without a refresh. I want to do this with unobtrusive javascript so don't want onclick handlers on my images. Since I'm just starting out with jQuery I have no idea how I can iterate all the images and add the function. Here are the images with the form tags as they stand:

<td>
            <% using (Html.BeginForm("Increase", "Sto开发者_开发百科ck", new { Id = item.StockId }))
               {%>
            <input type="image" src="/Content/Images/bullet_add.png" style="margin-left:20px;" />  <% } %>
             </td>
        <td><% using (Html.BeginForm("Decrease", "Stock", new { Id = item.StockId }))
               {%>
            <input type="image" src="/Content/Images/bullet_delete.png" style="margin-left:10px;" /><% } %>
        </td>

Can anyone help me out a little?

---

I would recommend you using the jquery form plugin which allows you to unobtrusively ajaxify your html forms. So given those forms:

<td>
    <% using (Html.BeginForm("Increase", "Stock", new { Id = item.StockId },
              FormMethod.Post, new { @class = "changeStock" })) { %>
        <input type="image" src="/Content/Images/bullet_add.png" style="margin-left:20px;" />
    <% } %>
</td>
<td>
    <% using (Html.BeginForm("Decrease", "Stock", new { Id = item.StockId },
              FormMethod.Post, new { @class = "changeStock" })) { %>
        <input type="image" src="/Content/Images/bullet_delete.png" style="margin-left:10px;" />
    <% } %>
</td>

You could ajaxify them:

$(function() {
    // Ajaxify the forms having the changeStock class
    $('form.changeStock').ajaxForm(function(result) {
        // On the success callback update a container which holds 
        // the items in order to refresh the UI. For this the controller
        // actions you are posting to need to return PartialView with only
        // the parts of the html that needs to be updated.
        $('#listOfItems').html(result)
    });
});

---

This is untested, but hopefully it gets you going in the right direction. I'll updated my answer if you can provide more info based on my above comment.

$(document).ready(function(){
    //this will target all <input type='image'> controls for all forms on the page. A better practice would be to focus on just the target forms
    //  perhaps based on the ID of a containing div, etc
    $("form [input[@type=image]").click(function(){
        //$image is now a jQuery object variable referencing the clicked image
        var $image = $(this);

        //$form is now a jQuery object variable referencing the parent <form> of the clicked image
        var $form = $image.parent();

        //stockId is now a variable referencing the id of the form, assuming this is the stockID we want to manipulate
        var stockId = $form.attr("id"); 

        //probably a better way to do this, but to know if we want to go up or down, I checked the src attribute of the <input type='image'> control
        //if the url of the image contains add, the direction is add, else it's del
        var direction = $image.attr("src").contains("add") ? "add" : "del";

        //call a function to handle the add,del
        shiftStock(stockId, direction);
    });
});

//a javascript function that accepts the ID of the stock and the direction we want to go
function shiftStock(stockId, direction){

    //do an ajax call using jQuery, passing in our stockId and direction
    //I'm using a get, but and an XML return data Type, but this could just as easily be a post with json, etc
    $.ajax(
        type: "GET",
        url: "webserviceurl??",
        dataType: "XML",
        data: "stockId=" + stockId + "&direction=" + direction,
        success: function(xml){
            //parse the returned xml if need be to handle any UI updates, like new stock numbers, etc?
            alert(xml);
        },
        error: function(xml, error, status){
            alert(error);
        }
    );
}