Path: csiph.com!weretis.net!feeder8.news.weretis.net!news.mb-net.net!open-news-network.org!.POSTED.96.235.197.178.dynamic.wless.lssmb00p-cgnat.res.cust.swisscom.ch!not-for-mail
From: Thomas 'PointedEars' Lahn <PointedEars@web.de>
Newsgroups: comp.lang.javascript
Subject: Re: Painted into a corner
Date: Mon, 07 Dec 2020 04:25:43 +0100
Organization: PointedEars Software (PES)
Lines: 59
Message-ID: <11650524.O9o76ZdvQC@PointedEars.de>
References: <CrOdnaj9_ITsBFDCnZ2dnUU7-VfNnZ2d@westnet.com.au>
Reply-To: Thomas 'PointedEars' Lahn <cljs@PointedEars.de>
Mime-Version: 1.0
Content-Type: text/plain; charset="UTF-8"
Content-Transfer-Encoding: 8Bit
Injection-Info: gwaiyur.mb-net.net; posting-host="96.235.197.178.dynamic.wless.lssmb00p-cgnat.res.cust.swisscom.ch:178.197.235.96"; logging-data="28150"; mail-complaints-to="abuse@open-news-network.org"
User-Agent: KNode/4.14.10
Cancel-Lock: sha1:oi4vZPmAd3aoaic74Zdhm7k/C7A=
Face: iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAGFBMVEXTxa4RFk5dUWANED8PFEfy7+MGBiW+n3ZNF/QuAAACaElEQVQ4jVXUwVOcMBQG8Dc7Rc4PUntdWV2uxjDpGaGeozOp1woar4jd5t/v9wLstMwsA/ntlxdCAgUc1hjTc9/JCZfGoo3wG3HdmdAWrIJRHe7GM/TmpY5VFefuVcAkkPbLIaN8rmPmjloyZxgyR3GuJ4K0AGtJ2htz8o7yqikm759fldQXaMpbDzjKAG+8v+AugVTOPO5DOjLvGtUYQwh0CPjnVMyGd+8/GfUB5nLKJDD2aLDh5HYyMDJGDwQIo2ZmZcKbowNmAdB/AzyFhrmF2MHRb0QJJfaAnwGB6orZhoykLzJtGwF/xpYxI1dswomiUj3gTuAIqCn/4C7cULwGNBtwMTk3Y4LfKB5YUaOKBKYtpplm7u0vip8tU1NWWyI/7XdcSuIDoMt6rVHMWT0DbjHPGqDqZVSa6zleLcUTcIKLoMv3ueJluALtAo9B302zPPlrtiVScRdCjXvVh3e3JpYa/jjkuC9N+LrBMlz/eAN4eQijX2EdLo6c5tGGHwLyHFtXk89dDGHwCVhG9T0S/j55AhRZgkMCmUQXJ49TnS1wnQDvw0eAh9ICeMmEFbCnPMFzjAvsWoEWEFdYEx+S0MoUZ1gT1wId8+AF3Bl2OoEu906AUHx5VLw/gXYg/x84loOah/2UYNrgiwSwGO7RfUzVBbx/kgpckumGOi6QirtD6gkLTitbnxNol47S2jVc2vsN5kPqaAHT8uUdAJM4v/DanjYOwmUjWznGfwB7sGtAtor5BgofDuzaRj4kSQAqDakTsKORa3Q3xKi3gE1fhl71KRMqrdZ2AWNNg/YOhQyrVBnb+i+nEg4bsDA+egAAAABJRU5ErkJggg==
X-User-ID: U2FsdGVkX1+diiTitInl+Kl0L4O2dkb8w5PhtGQn2Rl7gpdpcVQ+9A==
X-Face: %i>XG-yXR'\"2P/C_aO%~;2o~?g0pPKmbOw^=NT`tprDEf++D.m7"}HW6.#=U:?2GGctkL,f89@H46O$ASoW&?s}.k+&.<b';Md8`dH6iqhT)6C^.Px|[=M@7=Ik[_w<%n1Up"LPQNu2m8|L!/3iby{-]A+#YE}Kl{Cw$\U!kD%K}\2jz"QQP6Uqr],./"?;=4v
Xref: csiph.com comp.lang.javascript:39236

Andrew Poulos wrote:

> I've coded a page with a form containing a number of "components". One
> component (called the Image component) has a tabset that and 50+ inputs
> (radio buttons, text fields, colour inputs, number inputs...) Each input
> has an ID.
> 
> The Image component's job is to configure an image (size, position,
> filters...)
> 
> To capture the values I simply serialise the form into an array of
> objects (the array ends up with several hundred objects) eg.
> 
> ...
> {type: "number", id: "imgWidth", value: "0", disabled: false, checked:
> false}
> {type: "checkbox", id: "imgGrayscaleCbx", value: "on", disabled: false,
> checked: false}
> {type: "range", id: "imgGrayscaleRange", value: "0", disabled: true,
> checked: false}
> ...
> 
> I believed that only ONE image will ever be needed. Now I'm tasked with
> dealing with an unlimited number of images - up to, say, 24 images.
> 
> What I'm stuck on is how to serialise/get the values for multiple
> images. If I clone the component for each image then there'll be
> multiple elements with the same ID (and 20 images will mean 1000+ inputs).
> 
> If I increment a counter and add it to the ID (so for the second Image
> "imgWidth1" becomes imgWidth2" and the third "imgWidth3" what happens
> then if the user decides to delete the second image? I'll have
> "imgWidth1" and "imgWidth3" but no "imgWidth2".
> 
> Is there some generalised way I can approach a solution for this?

The old and proofed solution: Give controls of the same type the same “name” 
[attribute value] instead of an ID, and iterate over the NodeList that is 
automatically created then:

  let elements = form.elements;
  Array.from(elements['imgWidth']).forEach((control, index) => {
    /* serialize control */

    /* serialize elements['imgGrayscaleCbx'][index] */

    /* serialize elements['imgGrayscaleRange'][index] */
  });

The NodeList is live, so if the user decides to delete the base control 
(here: referred by “control”), this is not a problem.

I am pretty sure that bullet-proof form serialization code has already been 
written several times.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.