69

I'm creating a page with the products sold in the website. I'd like to include an "add to cart" button near each product, which are listed with markup similar to this:

<h4 class="productHeading">Product Name 1</h4>
<div>
  Extra information on the product 1.
</div>
<h4 class="productHeading">Product Name 2</h4>
<div>
  Extra information on the product 2.
</div>
 ...

Since the submit inputs will have different names (with the code of the product included), the big question is: should I wrap the entire product list in a form, or should I create one form for each product? In code:

<form method="post" action="process.php">
  <h4 class="productHeading">Product Name 1</h4>
  <div>
    Extra information on the product 1.
    <input type="submit" name="submit1" value="Add to Cart">
  </div>
  <h4 class="productHeading">Product Name 2</h4>
  <div>
    Extra information on the product 2.
    <input type="submit" name="submit2" value="Add to Cart">
  </div>
</form>

Or…

<h4 class="productHeading">Product Name 1</h4>
<div>
  Extra information on the product 1.
  <form method="post" action="process.php">
    <input type="submit" name="submit1" value="Add to Cart">
  </form>
</div>
<h4 class="productHeading">Product Name 2</h4>
<div>
  Extra information on the product 2.
  <form method="post" action="process.php">
    <input type="submit" name="submit2" value="Add to Cart">
  </form>
</div>

Which one is best practice? Any serious reason not to use one or the other, or am I doing it completely wrong?

winck
  • 1,024
  • 2
  • 10
  • 12

1 Answers1

113

Best practice: one form per product is definitely the way to go.

Benefits:

  • It will save you the hassle of having to parse the data to figure out which product was clicked
  • It will reduce the size of data being posted

In your specific situation

If you only ever intend to have one form element, in this case a submit button, one form for all should work just fine.

My recommendation Do one form per product, and change your markup to something like:

<form method="post" action="">
    <input type="hidden" name="product_id" value="123">
    <button type="submit" name="action" value="add_to_cart">Add to Cart</button>
</form>

This will give you a much cleaner and usable POST. No parsing. And it will allow you to add more parameters in the future (size, color, quantity, etc).

Note: There's no technical benefit to using <button> vs. <input>, but as a programmer I find it cooler to work with action=='add_to_cart' than action=='Add to Cart'. Besides, I hate mixing presentation with logic. If one day you decide that it makes more sense for the button to say "Add" or if you want to use different languages, you could do so freely without having to worry about your back-end code.

Ayman Safadi
  • 11,502
  • 1
  • 27
  • 41
  • Thanks Ayman. Some comments: regarding point one, won't I have to parse the data anyway? It will be multiple forms with the same "action". And on point 2, only one submit will be sent, so the POST size should be the same in both cases, right? – winck Jan 03 '12 at 14:15
  • 1
    Thanks a lot Ayman! Unfortunately I can vote up only once! Best wishes – winck Jan 03 '12 at 16:02
  • @winck, In you're case, you're right on both counts. However the second you add a second field to your form, my recommendation will make more sense. – Ayman Safadi Jan 04 '13 at 10:28
  • 3
    Having multiple forms also means that you can use client-side validation like the `required` attribute, without it meaning your users have to fill in a field for product x when modifying something about product y. – Sam Sep 23 '16 at 13:37
  • 1
    The final comment from Sam is the one that solved my dilemma. Thanks Sam! – griswolf Nov 15 '18 at 09:46