购物车页面 html 表单设计答案

【问题标题】：shoppingcart page html forms design购物车页面 html 表单设计
【发布时间】：2011-09-14 04:19:09
【问题描述】：

在为购物车视图设计模板时，我使用循环来创建购物车中要显示的项目列表。我还想提供删除按钮，使用户能够从购物车中删除每个项目。html出来是这样的

在下面的 html 代码中，在 /books/removefromcart/91 中，91 是购物车 ID。 Cartitemid 代表项目的 ID。

为每个列表项创建一个表单是一种不好的风格吗？哪种方法是正确的？

<form action="/books/removefromcart/91" method="POST" > 
  <li>1. mastering java  1 copies 
<input type="hidden" name="cartitemId" value="94"/> 
<input type="submit" value="remove"/>              
</li>                   
</form>

<form action="/books/removefromcart/91" method="POST" > 
<li>2. mastering python 2 copies 
<input type="hidden" name="cartitemId" value="93"/> 
<input type="submit" value="remove"/>              
</li>                   
</form>

<form action="/books/removefromcart/91" method="POST" > 
<li>3. mastering ruby 1 copies 
<input type="hidden" name="cartitemId" value="92"/> 
 <input type="submit" value="remove"/>             
 </li>                  
</form>
..
<!--a form for adding item to cart -->
<form action="/books/addtocart/43" method="POST">
  <label for="quantity">Number of Copies:</label>               
<select id="quantity" name="quantity"> 
<option selected="" value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option>
...
</select>
<input type="hidden" name="cartId" value="91"/> 
<input type="submit" value="AddToCart" />  
</form>

【问题讨论】：

标签： html forms shopping-cart

【解决方案1】：

在更新/删除的每个按钮上调用一个 javascript 函数并将该产品值传递给该函数...然后您可以对其进行处理...

例如：---

<input type="button" OnSubmit="remove('91');" value="Remove" />


function remove(id)
{

    $.ajax({
                                url: 'yourpage.aspx,
                                type: 'POST',
                                data: 'prodid='+id,
                                success: function(response) {
                                    /*your code for success goes here */
                                }
                            });
}

【讨论】：