Path: csiph.com!aioe.org!news.mb-net.net!open-news-network.org!.POSTED.69.235.197.178.dynamic.wless.lssmb00p-cgnat.res.cust.swisscom.ch!not-for-mail
From: Thomas 'PointedEars' Lahn <PointedEars@web.de>
Newsgroups: comp.infosystems.www.authoring.misc,comp.lang.javascript
Subject: Re: Tough problem
Followup-To: comp.infosystems.www.authoring.misc
Date: Wed, 09 Aug 2017 23:13:08 +0200
Organization: PointedEars Software (PES)
Lines: 85
Message-ID: <1815882.oMNUckLgyt@PointedEars.de>
References: <1e65472b-7816-40fd-9399-370128589a47@googlegroups.com> <1kehis9pjd2y7.1k1lhmq3nt8fl.dlg@40tude.net>
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="69.235.197.178.dynamic.wless.lssmb00p-cgnat.res.cust.swisscom.ch:178.197.235.69"; logging-data="28785"; mail-complaints-to="abuse@open-news-network.org"
User-Agent: KNode/4.14.2
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
X-User-ID: U2FsdGVkX195FhohsvLSlotnNhcNzmPXoMuKimd7BXcXArlfSfK3LA==
Cancel-Lock: sha1:ERaVmNia8hsBsBRUk5y9Lp//iqs=
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==
Xref: csiph.com comp.infosystems.www.authoring.misc:60 comp.lang.javascript:33740

JJ wrote:

> On Mon, 7 Aug 2017 19:00:33 -0700 (PDT), justaguy wrote:
>> In the following BIG form (tons of FORM elements), function event trigger
>> is the button with + sign beneath each group.
>> http://54.80.71.115/dev/bigFORM.html
>> 
>> Under J1 and J11 pair (of groups), if we click on the outmost + sign it
>> would duplicate with J1 and J11, and if we just click on the + sign
>> beneath J11 it would duplicate just J11.
>> 
>> Currently, all the names of the J11 elments start with a prefix of "J11_"
>> and each element is an array.  What I'd like to do is, for each J1 I'd
>> like to consider it as a "row" and I attempted to insert "row1", "row2"
>> etc. upon each J1 addition.  Then, I also need to know how many J11 is in
>> each J1.
> 
> If the J11 sections must be part of the J1 section, then their HTML
> elements should be placed hierarchically and treated as hierarchy, rather
> than as flat list. […]

More importantly, the `fieldset` element (_not_ only the `div` element) 
should be used to indicate which form controls belong together.  `fieldset` 
elements can actually be nested:

<https://www.w3.org/TR/2016/REC-html51-20161101/sec-forms.html#the-fieldset-element>

For that, it may be necessary – as is wise in any case – to split the big 
table into several (as `fieldset` elements cannot span table cells, and use 
CSS to define a common minimum first column width.

However, the OP has misunderstood the meaning of “FORM element”.  There is 
only *one* `form` element in this document (not “tons”), and that is good 
so.  (Only one is needed if it contains all form _controls_.)

Also,

  <tr>	
    <td>1st Installment: <input type="text" name="AZT2FirstInstallment[]">
      <br>
      2nd Installment: <input type="text" name="AZT2SecondInstallment[]">
    </td>
  </tr>

should be at least

  <tr>	
    <th><label for="AZT2FirstInstallment1">1st Installment</label></th>
    <td><input id="AZT2FirstInstallment1"
               name="AZT2FirstInstallment[]"></td>
  </tr>
  <tr>
    <th><label for="AZT2SecondInstallment2">2nd Installment</label></th>
    <td><input id="AZT2SecondInstallment2"
               name="AZT2SecondInstallment[]"></td>
  </tr>

    [The colon has been intentionally removed from the recommended markup
     to facilitate its being generated with CSS instead, based on the
     punctuation rules of the used language.  For example, for French the
     stylesheet would generate a non-breaking space followed by the colon,
     while for English and other languages it would just generate the colon:

       th label:after {
         content: ":";
       }

       [lang|="fr"] th label:after {
         content: "\a0 :";
       }

      <https://www.w3.org/TR/css3-selectors/#attribute-selectors>
    ]

Proper, user-friendly, semantic markup also makes it easier to use scripting 
to create Web applications:

<http://html5doctor.com/> pp.

X-Post & F’up2 <news:comp.infosystems.www.authoring.misc>

-- 
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.