JQuery - Get values from html array inputs

Question

A user has the capacity to add as many items as possible through html inputs. The inputs look like;

 <input class="form-control" name="part_number[]" number" type="text">
 <input class="form-control" name="part_number[]" number" type="text">
 <input class="form-control" name="part_number[]" number" type="text">

 <input class="form-control item" name="description[]" type="text">
 <input class="form-control item" name="description[]" type="text">
 <input class="form-control item" name="description[]" type="text">

I would like to add the items to my database for storage.. How do i iternate through each input? part number and description belong to a single row.

Answer 1

 function getdata() { var partNumbers = []; var descriptions = []; $('[name="part_number[]"]').each(function() { partNumbers.push(this.value); }) $('[name="description[]"]').each(function() { descriptions.push(this.value); }) var data = { partNumbers: partNumbers, descriptions: descriptions } $('#output').val(JSON.stringify(data)) } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input class="form-control" name="part_number[]" type="text" value="part number 1"> <input class="form-control" name="part_number[]" type="text" value="part number 2"> <input class="form-control" name="part_number[]" type="text" value="part number 3"> <br> <input class="form-control item" name="description[]" type="text" value="description 1"> <input class="form-control item" name="description[]" type="text" value="description 2"> <input class="form-control item" name="description[]" type="text" value="description 3"> <hr> <button type="button" onclick="getdata()">get data</button> <textarea id="output" rows="10" cols="100" placeholder="output"></textarea> 

Answer 2

If your inputs are within a form, you can use .serializeArray() and then .reduce() it to create an object which stores keys and array values for multiple input types like below. You can then submit this data to your server to then store in your database:

 const data = $("#myform").serializeArray().reduce((acc, o) => { if (o.name.slice(-2) === "[]") { acc[o.name] = acc[o.name] || []; acc[o.name].push(o.value); } else { acc[o.name] = o.value; } return acc; }, {}); console.log(data); // data to POST 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="myform"> <input class="form-control" name="part_number[]" value="pn1" type="text"> <input class="form-control" name="part_number[]" value="pn2" type="text"> <input class="form-control" name="part_number[]" value="pn3" type="text"> <input class="form-control item" name="description[]" value="desc1" type="text"> <input class="form-control item" name="description[]" value="desc2" type="text"> <input class="form-control item" name="description[]" value="desc3" type="text"> <input class="form-control item" name="single_data" value="non-array data" type="text"> </form> 

Answer 3

From your question, I understand that you want the description and part number in a row. Please find my answer using .each function of jQuery.

The .each() function iterates through all the specified elements and it returns the index position of each element. Here I'm iterating through the part number, so I want to take the corresponding description, that is the description at the index position of part_number. To achieve this am using another jQuery selector :eq() . It will select the element at index n within the matched set.

 $(".submit").on("click", function(){ let user_input = []; $("input[name='part_number[]']").each(function(index){ user_input.push({ part_number: $(this).val(), description: $(`.item:eq(${index})`).val() }); }); console.log("final result = ", user_input); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input class="form-control" name="part_number[]" placeholder="number" type="text"> <input class="form-control" name="part_number[]" placeholder="number" type="text"> <input class="form-control" name="part_number[]" placeholder="number" type="text"> <input class="form-control item" name="description[]" placeholder="description" type="text"> <input class="form-control item" name="description[]" placeholder="description" type="text"> <input class="form-control item" name="description[]" placeholder="description" type="text"> <button type="submit" class="submit"> Save</button> 

Answer 4

I would rather fix the HTML than trying to fix the data afterwards.

You have items with the values description and part_number , in order to group the data i would firstly group them visually in your HTML by adding a wrapper around each part_number + description pair:

<div class="item">
    <input type="text" name="part_number[]" />
    <input type="text" name="decription[]" />
</div>

After that we fix the input names' and add them to a group item :

<div class="item">
    <input type="text" name="item[part_number]" />
    <input type="text" name="item[decription]" />
</div>

To add multiple item elements in your form you need to add an ID to each item when adding it to your form:

<div class="item">
    <input type="text" name="item[0][part_number]" />
    <input type="text" name="item[0][decription]" />
</div>
<div class="item">
    <input type="text" name="item[1][part_number]" />
    <input type="text" name="item[1][decription]" />
</div>

When adding these values to your database you can then iterate over them like so: ( I'm just guessing you will use PHP)

foreach( $_POST['item'] as $item) {
    $item['part_number'];
    $item['description];
}