target a particular box of an input array

[ajoo]

Hi all !

I have created an array of input boxes and i wish to target each individually to check its contents after the user has input some values and pressed the click button.

I have a fiddle at  http://jsfiddle.net/crnsbz5a/13/

When the button is clicked, I want to compare the values of the input fields against the "a" array. If there is a mismatch I want to change the background color of the input box to a different color. 

I cannot figure out how to target the individual input box. 

Thanks all ! 

 

[requinix]

Before that, you know you're wrapping each input in its own form, right? Separately?

You're creating the inputs and forms dynamically. Add an event listener to the form you make so that when it's (attempted to be) submitted that it checks the input against the item in the array. The only awkwardness is the array variable being reused so you can't use it in a closure, so instead of that try Array.map() like

a.map(function(value, key) {
	// ...
});

 

[ajoo]

Hi Requinix !

Quote

Before that, you know you're wrapping each input in its own form, right? Separately?

Now that you point it out, I can see it ? ! Thanks ! And now that you told me, kindly help me resolve it as that as well !

I couldn't get the map function to resolve the issue so i used this instead :

$.each(test_arr, function(i, item) { ... });

So please help me wrap all the fields in a single form so that they may be submitted with a single button click.

Thanks loads !

[requinix]

map, each, same difference.

First: why are you creating everything through Javascript?

[ajoo]

Hi !

I am creating everything through javascript, since the number of fields are dynamic in the sense that they can change. I can need all the way from 10 to 20 fields and depending on that I would need to set them with different font and ( box ) size settings to have a proper page layout. 

Is it not a good idea to use JS to create the page ?

What would you suggest?

Quote

map, each, same difference.

I think you mean that I should use map to get all the values ( that i have already tried out ) and then use for each on that to target the values one by one. correct ?

Thanks !

Edited May 13, 2019 by ajoo

[requinix]

Are you not using PHP? If you needed to add or remove fields after the page loaded, that's one thing, but if you know ahead of time then you should do all the work in PHP and deliver the completed result to the browser without it having to perform additional work.

[ajoo]

Hi requinix, 

Thanks for that insight ! That's what I will do then. 

Thanks !