Member Avatar for texaskraut

Hi everybody,
I'm Tina from Texas, have been dabbling with websites for a bit but obviously need HELP since I'm here ....
Can anybody fix the html in a form that submits several size and color options to a shopping cart ?

Thank You for your help
Tina

  • 4 Contributors
  • 3 Replies
  • 48 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by zandiago

Dani AI

Generated

welcome! If you want shoppers to add several color-size combos in a single submit, structure the form as an array of line items. Each line item carries the variant info and a quantity; the backend loops through the submitted items and ignores any with qty 0. This pattern keeps the UI simple and the payload predictable.

<form method="post" action="/cart/add">
  <input type="hidden" name="product_id" value="12345">

  <div class="line-item">
    <input type="hidden" name="items[0][color]" value="red">
    <input type="hidden" name="items[0][size]" value="S">
    <label for="qty-0">Red - Small</label>
    <input id="qty-0" type="number" name="items[0][qty]" min="0" value="0">
  </div>

  <div class="line-item">
    <input type="hidden" name="items[1][color]" value="red">
    <input type="hidden" name="items[1][size]" value="M">
    <label for="qty-1">Red - Medium</label>
    <input id="qty-1" type="number" name="items[1][qty]" min="0" value="0">
  </div>

  <button type="submit">Add selected</button>
</form>

Tips to make this work well:

  • Every control must have a name to be submitted; disabled controls are not submitted. That is defined as what the spec calls successful controls see spec.
  • Use stable codes in values (e.g., red, S, or a variant_id) rather than display text. Many carts prefer a single variant_id per line; if so, replace color/size with items[n][variant_id].
  • Clear labeling and grouping improve UX. Group by color or size, keep labels near qty inputs, and show out-of-stock as text so it is understandable without color alone.
  • If you only want one combo per add-to-cart, use two <select>s with required and a single qty instead of the grid. MDN has a good primer on how form data is sent and parsed by servers MDN guide.

is right about posting in the right section; if you share your current markup, folks here can help adapt the names to match your cart.

Recommended Answers

All 3 Replies

Member Avatar for Jx_Man

Hi...Welcome to Daniweb Friend :)
Please post your help in current section.

Member Avatar for selfhelpebooks

Hi Tina,
Welcome to the site.
:)

Member Avatar for zandiago

Glad to have you here!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.