• Tough problem

    From Thomas 'PointedEars' Lahn@21:1/5 to All on Wed Aug 9 23:13:08 2017
    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)