Question

I am working on an e-commerce application shopping cart. I have a pricing page which display a list of products and their prices for multiple categories. User can choose to add multiple products to shopping cart (active shopping cart is being shown on right hand side of page). I am trying to use Ajax/jQuery for adding items to my cart. I have a form wrapped around each product which contains multiple hidden fields I would like to pass to my function and to the controller. You can see all these in the code below:

<% foreach (var _category in Model) { %>
    <% foreach (var _product in _category.Products)
        { %>
        <tr>
            <td align="left" valign="top"><% = _product.Description %> (<% = _product.Code %>)</td>
            <td valign="top" align="center">$<% = _product.TotalPrice %></td>
            <td align="left">
                <form id="frmProduct_<%=_product.Code%>">
                    <input type="button" onclick="JavaScript:addProductToBasket(this.form);" value="+ Add to cart" />
                    <input type="text" id="hProductCode" value="<% = _product.Code %>" />
                    <input type="text" id="Text1" value="<% = _product.TotalPrice %>" />
                    <!--Other hidden fields for passing data -->
                </form>
            </td>
        </tr>
    <% } %>    
<% } %>    

Since I have multiple forms on page, I am having hard time accessing a particular form inside my javascript function. What is a best way to handle this scenario?

<script type="text/javascript">
    function addProductToBasket(_form) {
        alert('Hi');
        var str = $('#_form').serialize();
        alert(str);
    }
</script>

I am using ASP.NET MVC 2.0 and cannot move to MVC 3.0 at the moment.

Answer 1

Try to make your forms working without using javascript first. Then start thinking about all the ajax and jQuery stuff.

• Remove the id attribute from the forms and add an action attribute (or use the MVC method: Using Html.BeginForm), add a class attribute to the form tag.
• Remove the Totalprice field, you should always calculate this server-side, the only fields you need to submit are the product code (and a quantity).
• Remove the javascript button and replace it with a classic submit button.

When you want to ajaxify the form, try something like this:

$(function () {
 $(".addproductform").submit(function () { // turn all forms with the addproductform class into an ajax version
  $.post($(this).attr("action"), $(this).serialize(), function (data) {
   // data contains the confirmation or failure that the product was added to your cart, update the cart html on this page
  });

  return false; // form already submitted using ajax, don't submit it again the regular way
 });
});