[FIXED] How to get value of elements when appended and push in array

Issue

Details:

So I am trying to create an admin panel, in the product section, I am having a single element ( with class form-group form-row ) which contains 3 inputs ( I.e Item, Quantity and price ) below that, an Add button is there, which adds another element ( with class form-group form-row )

And have declared variables and array for the field

let CustomerName;
let CustomerAddress;
let CustomerNumber;
let CustomerType;
let itemsNumber = 1;
let items = [];
let quantities = [];
let prices = [];
let timeNdate;

What I want: on Save Sales button click I want to get the Item inputs value to items[] array from each row ( not appended or appended )

and similarly with Quantity and Price

Please help with this!

Solution

As far as I understood your question, You want to fetch the values of Items, Quantities and Price input into each array (items, quantities and prices defined arrays) correct?

You could do one thing, you could add a suffix to each element's DOM id as an when you add a row and save how many rows are present (count).

So initially, only one row is present so count = 1 and the item's input id would be item-1.

Similarly, if you click add button, increment the count to 2 and now there would be two item inputs with ids ['item-1' and 'item-2']

When you click the Save button, you have a count variable to know how many rows are present. You would just have to loop through the input and get the values present in it. For example

for( let i=1 ; i<count ; i++){
    items.push($("#item-"+i).val());
    quantities.push($("#quantities-"+i).val());
    prices .push($("#prices-"+i).val());
}

Now, this type of solution is quite native and could be solved by just parsing the whole div and getting the child elements and fetching the values from it but that would just make it a hell lot of complex. This above solution will just work smoothly and efficiently since you are just manipulating the DOM id according to the row index and just accessing the value from it using jquery fetch. You could also use document.getElementById("item-1").value

Hope it helps! Think about it and just code.

Answered By - Rush W.

Answer Checked By - Gilberto Lyons (PHPFixing Admin)