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

Groups > comp.lang.javascript > #33707 > unrolled thread

Tough problem

Back to article view | Back to comp.lang.javascript

Contents

  Tough problem justaguy <lichunshen84@gmail.com> - 2017-08-07 19:00 -0700
    Re: Tough problem JJ <jj4public@vfemail.net> - 2017-08-09 23:13 +0700
      Re: Tough problem justaguy <lichunshen84@gmail.com> - 2017-08-09 11:02 -0700
        Re: Tough problem justaguy <lichunshen84@gmail.com> - 2017-08-09 11:22 -0700
          Re: Tough problem justaguy <lichunshen84@gmail.com> - 2017-08-09 12:00 -0700
      Re: Tough problem Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2017-08-09 23:13 +0200
      Re: Tough problem justaguy <lichunshen84@gmail.com> - 2017-08-09 16:46 -0700

#33707 — Tough problem

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.

The problem is: I'm using the same function to add another J11.

Here's the code:

	var r = 1,
	f11c = 1;
	
	var addCode = function(s,t) {

		var copy = document.getElementById(s),
			parent = document.getElementById(t);
	
		 var newNode = copy.cloneNode(true); 
		 parent.appendChild(newNode);

		
		// reset f11c to default
		f11c = 1;
			
		// J1, J11
		if (s == "J1") {
			r += 1;		
			el = document.createElement('input');
			el.id = 'row'+r;
			el.name = 'row'+r;
			el.value = r;
			
			var f = document.getElementById('TSG');
			f.appendChild(el);

			obj = document.getElementById('row'+r);
			obj.value = r;
			console.log(obj,obj.value);			

			if (!(document.getElementById('row'+r+'_j11count')))  {
				el = document.createElement('input');
				el.id = 'row'+r+'_j11count';
				el.name = 'row'+r+'_j11count';
				el.value = f11c;
				
				var f = document.getElementById('TSG');
				f.appendChild(el);		
				
				obj2 = document.getElementById('row'+r+'_j11count');
				obj2.value = f11c;
				console.log('J1 level',f11c, obj2, obj2.value);				
			}

		}
	}


	var addCodeG = function(s,t) {
	
	f11c += 1;

		// update J11 (f11) count for the new J1
		if (document.getElementById('row'+r+'_j11count')) {
			obj2 = document.getElementById('row'+r+'_j11count');
			obj2.value = f11c;
			console.log('i', obj2, obj2.value);	
				
			}	
		else {
				el = document.createElement('input');
				el.id = 'row'+r+'_j11count';
				el.name = 'row'+r+'_j11count';
				el.value = f11c;
				
				var f = document.getElementById('TSG');
				f.appendChild(el);		
				
				obj2 = document.getElementById('row'+r+'_j11count');
				obj2.value = f11c;
				console.log('e',f11c, obj2, obj2.value);			
		
			}	
		
		
	var copy = document.getElementById(s);
		
	 newNode = copy.cloneNode(true); 			
	// parentlastchild.appendChild(newNode);
	
	t.insertAdjacentElement('afterend',newNode); 
		
	}
	


Many thanks.

[toc] | [next] | [standalone]

#33731

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.

Consider below layout.

  <div id="J_Container">
    <div class="J1_Section">
      <table class="J1_Fields">
        <!-- put J1 fields here -->
      </table>
      <div class="J1_Controls">
        <!-- put J1 buttons here -->
      </div>
      <div class="J11_Section">
        <table class="J11_Fields">
          <!-- put J11 fields here -->
        </table>
        <div class="J11_Controls">
          <!-- put J11 buttons here -->
        </div>
      </div>
    </div>
  </div>

When the J1 "+" button is pressed, it should clone its own "J1_Section" and
append/insert the clone onto "J_Container". So, the clone will clone itself
(J1) and its J11 sections including the J1 and J11 buttons. You'll need to
reinitialize the cloned node if you need it to have blank fields and only
one J1 section, before appending it onto "J_Container".

When the J11 "+" button is pressed, it should clone its own "J11_Section"
and append/insert the clone onto "J1_Section". Like above, it'll clone
itself including the J11 buttons.

Use `getElementsByClassName()` or `querySelectorAll()` to retrieve the
sections. e.g.

  var J1Sections = document.getElementsByClassname("J1_Section");
  var J1First = J1Sections[0];
  var J1First_J11Sections = J1First.getElementsByClassname("J11_Section");
  var J1First_J11First = J1First_J11Sections[0];

[toc] | [prev] | [next] | [standalone]

#33734

On Wednesday, August 9, 2017 at 12:13:55 PM UTC-4, 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.
> 
> Consider below layout.
> 
>   <div id="J_Container">
>     <div class="J1_Section">
>       <table class="J1_Fields">
>         <!-- put J1 fields here -->
>       </table>
>       <div class="J1_Controls">
>         <!-- put J1 buttons here -->
>       </div>
>       <div class="J11_Section">
>         <table class="J11_Fields">
>           <!-- put J11 fields here -->
>         </table>
>         <div class="J11_Controls">
>           <!-- put J11 buttons here -->
>         </div>
>       </div>
>     </div>
>   </div>
> 
> When the J1 "+" button is pressed, it should clone its own "J1_Section" and
> append/insert the clone onto "J_Container". So, the clone will clone itself
> (J1) and its J11 sections including the J1 and J11 buttons. You'll need to
> reinitialize the cloned node if you need it to have blank fields and only
> one J1 section, before appending it onto "J_Container".
> 
> When the J11 "+" button is pressed, it should clone its own "J11_Section"
> and append/insert the clone onto "J1_Section". Like above, it'll clone
> itself including the J11 buttons.
> 
> Use `getElementsByClassName()` or `querySelectorAll()` to retrieve the
> sections. e.g.
> 
>   var J1Sections = document.getElementsByClassname("J1_Section");
>   var J1First = J1Sections[0];
>   var J1First_J11Sections = J1First.getElementsByClassname("J11_Section");
>   var J1First_J11First = J1First_J11Sections[0];

Very helpful.  Revised as suggested.  But why for   
console.log('J1Sections length',J1Sections.length, 'J11Sections length:',J1First_J11Sections.length);

J1Sections.length returns 1 instead of 2 when a new Section is added
same is true for J1First_J11Sections.length

Thanks.

[toc] | [prev] | [next] | [standalone]

#33735

On Wednesday, August 9, 2017 at 2:02:32 PM UTC-4, justaguy wrote:
> On Wednesday, August 9, 2017 at 12:13:55 PM UTC-4, 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.
> > 
> > Consider below layout.
> > 
> >   <div id="J_Container">
> >     <div class="J1_Section">
> >       <table class="J1_Fields">
> >         <!-- put J1 fields here -->
> >       </table>
> >       <div class="J1_Controls">
> >         <!-- put J1 buttons here -->
> >       </div>
> >       <div class="J11_Section">
> >         <table class="J11_Fields">
> >           <!-- put J11 fields here -->
> >         </table>
> >         <div class="J11_Controls">
> >           <!-- put J11 buttons here -->
> >         </div>
> >       </div>
> >     </div>
> >   </div>
> > 
> > When the J1 "+" button is pressed, it should clone its own "J1_Section" and
> > append/insert the clone onto "J_Container". So, the clone will clone itself
> > (J1) and its J11 sections including the J1 and J11 buttons. You'll need to
> > reinitialize the cloned node if you need it to have blank fields and only
> > one J1 section, before appending it onto "J_Container".
> > 
> > When the J11 "+" button is pressed, it should clone its own "J11_Section"
> > and append/insert the clone onto "J1_Section". Like above, it'll clone
> > itself including the J11 buttons.
> > 
> > Use `getElementsByClassName()` or `querySelectorAll()` to retrieve the
> > sections. e.g.
> > 
> >   var J1Sections = document.getElementsByClassname("J1_Section");
> >   var J1First = J1Sections[0];
> >   var J1First_J11Sections = J1First.getElementsByClassname("J11_Section");
> >   var J1First_J11First = J1First_J11Sections[0];
> 
> Very helpful.  Revised as suggested.  But why for   
> console.log('J1Sections length',J1Sections.length, 'J11Sections length:',J1First_J11Sections.length);
> 
> J1Sections.length returns 1 instead of 2 when a new Section is added
> same is true for J1First_J11Sections.length
> 
> Thanks.

It's a bit crazy.  When I looked inside the Elements and I found two instances of J11_Section

[toc] | [prev] | [next] | [standalone]

#33736

On Wednesday, August 9, 2017 at 2:22:11 PM UTC-4, justaguy wrote:
> On Wednesday, August 9, 2017 at 2:02:32 PM UTC-4, justaguy wrote:
> > On Wednesday, August 9, 2017 at 12:13:55 PM UTC-4, 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.
> > > 
> > > Consider below layout.
> > > 
> > >   <div id="J_Container">
> > >     <div class="J1_Section">
> > >       <table class="J1_Fields">
> > >         <!-- put J1 fields here -->
> > >       </table>
> > >       <div class="J1_Controls">
> > >         <!-- put J1 buttons here -->
> > >       </div>
> > >       <div class="J11_Section">
> > >         <table class="J11_Fields">
> > >           <!-- put J11 fields here -->
> > >         </table>
> > >         <div class="J11_Controls">
> > >           <!-- put J11 buttons here -->
> > >         </div>
> > >       </div>
> > >     </div>
> > >   </div>
> > > 
> > > When the J1 "+" button is pressed, it should clone its own "J1_Section" and
> > > append/insert the clone onto "J_Container". So, the clone will clone itself
> > > (J1) and its J11 sections including the J1 and J11 buttons. You'll need to
> > > reinitialize the cloned node if you need it to have blank fields and only
> > > one J1 section, before appending it onto "J_Container".
> > > 
> > > When the J11 "+" button is pressed, it should clone its own "J11_Section"
> > > and append/insert the clone onto "J1_Section". Like above, it'll clone
> > > itself including the J11 buttons.
> > > 
> > > Use `getElementsByClassName()` or `querySelectorAll()` to retrieve the
> > > sections. e.g.
> > > 
> > >   var J1Sections = document.getElementsByClassname("J1_Section");
> > >   var J1First = J1Sections[0];
> > >   var J1First_J11Sections = J1First.getElementsByClassname("J11_Section");
> > >   var J1First_J11First = J1First_J11Sections[0];
> > 
> > Very helpful.  Revised as suggested.  But why for   
> > console.log('J1Sections length',J1Sections.length, 'J11Sections length:',J1First_J11Sections.length);
> > 
> > J1Sections.length returns 1 instead of 2 when a new Section is added
> > same is true for J1First_J11Sections.length
> > 
> > Thanks.
> 
> It's a bit crazy.  When I looked inside the Elements and I found two instances of J11_Section

ahe, it's the issue of messy tables... thanks.

[toc] | [prev] | [next] | [standalone]

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

[toc] | [prev] | [next] | [standalone]

#33744

On Wednesday, August 9, 2017 at 12:13:55 PM UTC-4, 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.
> 
> Consider below layout.
> 
>   <div id="J_Container">
>     <div class="J1_Section">
>       <table class="J1_Fields">
>         <!-- put J1 fields here -->
>       </table>
>       <div class="J1_Controls">
>         <!-- put J1 buttons here -->
>       </div>
>       <div class="J11_Section">
>         <table class="J11_Fields">
>           <!-- put J11 fields here -->
>         </table>
>         <div class="J11_Controls">
>           <!-- put J11 buttons here -->
>         </div>
>       </div>
>     </div>
>   </div>
> 
> When the J1 "+" button is pressed, it should clone its own "J1_Section" and
> append/insert the clone onto "J_Container". So, the clone will clone itself
> (J1) and its J11 sections including the J1 and J11 buttons. You'll need to
> reinitialize the cloned node if you need it to have blank fields and only
> one J1 section, before appending it onto "J_Container".
> 
> When the J11 "+" button is pressed, it should clone its own "J11_Section"
> and append/insert the clone onto "J1_Section". Like above, it'll clone
> itself including the J11 buttons.
> 
> Use `getElementsByClassName()` or `querySelectorAll()` to retrieve the
> sections. e.g.
> 
>   var J1Sections = document.getElementsByClassname("J1_Section");
>   var J1First = J1Sections[0];
>   var J1First_J11Sections = J1First.getElementsByClassname("J11_Section");
>   var J1First_J11First = J1First_J11Sections[0];

Wow, everything is working now at least according to my own testing.  Thanks again!

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web