How to append multiple values under one keys using FormData

Question

Given below. I'm trying to find a way how to append the input value under the same keys using FormData

results:

sku: [saafasf, hjhkk]
quantity: [3, 3]

<div>
 <input value="saafasf" readonly="" id="sku" name="sku"> 
 <input value="3" readonly="" id="quantity" name="quantity">
 <input value="hjhkk" readonly="" id="sku" name="sku"> 
 <input value="3" readonly="" id="quantity" name="quantity">
</div>

Trying to find a way how to get the array results with multiple values under one key via FromData

Does this answer your question? [Is it valid to have two input elements with the same name?](https://stackoverflow.com/questions/2906793/is-it-valid-to-have-two-input-elements-with-the-same-name) — kmoser, Nov 08 '22 at 05:10

score 0 · Answer 1 · answered Nov 08 '22 at 07:45

Multiple HTML elements in the same DOM can not contain the same id. Hence, you have to convert those into class to get it work.

And then you can access input values under same class using document.querySelectorAll() method.

Live Demo :

const skuArr = Array.from(document.querySelectorAll(".sku"), ({ value }) => value);
const quantityArr = Array.from(document.querySelectorAll(".quantity"), ({ value }) => value);

const formDataObj = {
  sku: skuArr,
  quantity: quantityArr
};

console.log(formDataObj);

<div>
 <input value="saafasf" readonly="" class="sku" name="sku"> 
 <input value="3" readonly="" class="quantity" name="quantity">
 <input value="hjhkk" readonly="" class="sku" name="sku"> 
 <input value="3" readonly="" class="quantity" name="quantity">
</div>

How to append multiple values under one keys using FormData

1 Answers1