XPost: comp.lang.javascript
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.
--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)