How to read values in input boxes generated dynamically as part of a collection list?

Ask us anything How do I?
,
1

Hello,

I have a scenario where I have a collection list that I iterate. Let’s say it’s an Employee list. I have 5 employees in the list.

Inside that collection list I generate 2 text boxes, which means I will have 10 text boxes in total.

A user can come in and enter values for 1 employee or more. There is no hard and fast rule that the user has to enter in order. They can randomly choose say the 3rd employee and fill in the details.

When I try to set values in my PATCH request, I don’t get the values of the text boxes, probably because it is inside a collection. Also, identifying the values - employee mapping doesn’t seem to be possible.

The number of employees is not a constant, it varies based on many conditions.

One thought I had was to hard code some upper limit (based on business) and then create those many in advance and hide them. Show only until the number of employees in my list. But this seems crude and a bit risky.

Any thoughts anyone?

2

Okay, I was able to proceed half way through.

I declared a global array variable.

On change of each textbox, I create an object inside the array. For eg.,

[
{
“id”:201,
“expected_salary”: 67000
},
{
“id”:200,
“expected_salary”: 62000
},
{
“id”:210,
“expected_salary”: 27000
}
]

Ideally this is how I want to create. Since I wrote this on “On change” event, for every keystroke, it adds an object. It ends up looking like this:

[
{
“id”:201,
“expected_salary”: 6
},
{
“id”:201,
“expected_salary”: 67
},
{
“id”:201,
“expected_salary”: 670
},
{
“id”:201,
“expected_salary”: 6700
},
{
“id”:201,
“expected_salary”: 67000
},
//similarly for the rest
]

I tried an true/false split to check whether the id value is present in the array or not. Since this is not a flat array the function contains will not work.

Is the JS the only option or is there any No code option that I’m overlooking?

Typically, is there any standard practice for such a situation?

Thanks in advance!

3

this might be a solution worth trying. let me know how it goes

Video Here

1 Like
4

@dingan Thank you so much! It worked like a charm, super elegant.