Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #39236

Re: Painted into a corner

Show all headers | View raw

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.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Painted into a corner Andrew Poulos <ap_prog@hotmail.com> - 2020-12-07 13:54 +1100
  Re: Painted into a corner Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2020-12-07 04:25 +0100
    Re: Painted into a corner Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2020-12-07 04:44 +0100
      Re: Painted into a corner Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2020-12-07 19:50 +0100
        Re: Painted into a corner Andrew Poulos <ap_prog@hotmail.com> - 2020-12-08 12:26 +1100
          Re: Painted into a corner "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2020-12-08 07:07 -0800
            Re: Painted into a corner Andrew Poulos <ap_prog@hotmail.com> - 2020-12-09 08:07 +1100
              Re: Painted into a corner Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2020-12-10 17:59 +0100
          Re: Painted into a corner Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2020-12-09 17:09 +0100
            Re: Painted into a corner Andrew Poulos <ap_prog@hotmail.com> - 2020-12-12 13:01 +1100
              Re: Painted into a corner Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2020-12-12 10:46 +0100
  Re: Painted into a corner "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2020-12-06 19:55 -0800
    Re: Painted into a corner Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2020-12-07 19:51 +0100
  Re: Painted into a corner Julio Di Egidio <julio@diegidio.name> - 2020-12-07 02:07 -0800

csiph-web