CODEWITHSUNDEEP
javascripthtmlformssemantic-markup
cpof_tea
cpof_tea

Reputation: 1

Many same input -> form to one request / many forms to many requests?

I'm working on <form> that have multiple groups of <input> with the same attributes name='product-code' and name='amount' (because of structure). For better understanding, example: form where you can choose color and amount of one specific product to add in a basket, but I want to send product code from the catalog (because each color of this product is another item in a catalog) instead of sending color names. And I'm trying to understand how it should be done semantically correctly and serialized. Should it be one form and one post request or many forms and many post requests? What's your opinion?

<form>
  <div>
    <input type="text" name="product-code" value="ST912600">
    <input type="number" name="amount" value="2">
  </div>
  <div>
    <input type="text" name="product-code" value="ST821806">
    <input type="number" name="amount" value="0">
  </div>
  <div>
    <input type="text" name="product-code" value="ST467165">
    <input type="number" name="amount" value="1">
  </div>
  <div>
    <input type="text" name="product-code" value="ST348499">
    <input type="number" name="amount" value="1">
  </div>
  <div>
    <input type="text" name="product-code" value="ST545081">
    <input type="number" name="amount" value="0">
  </div>
  <div>
    <input type="text" name="product-code" value="ST430287">
    <input type="number" name="amount" value="0">
  </div>
  <div>
    <input type="text" name="product-code" value="ST988144">
    <input type="number" name="amount" value="4">
  </div>
  <button type="submit">Send</button>
</form>

I'm expecting the server will parse request with multiple data as an array

Upvotes: 0

Views: 525

Answers (1)

Paul Weinsberg
Paul Weinsberg

Reputation: 19

You can't use the same name in form tag. Visual your form like an associated array.

name => value
name2 => value2

So if you send a form with the same name, you create a conflict.

But you can use a simple form, change name attribut like you want and set a class named product-code for example. preventDefault with JS on your submit button and use getElementsByClassName and get his value etc. save in an array and create a loop for submit one by one with formElt.submit() funtion.

Or create a lot of forms in HTML.

Upvotes: 1

Related Questions