NYCPHP Meetup

NYPHP.org

[nycphp-talk] Javascript "select all" feature?

Chris Bielanski Cbielanski at inta.org
Tue Apr 13 17:43:14 EDT 2004


Oops, once again I provide an unclear example... what I meant is that move[]
becomes move1, move2, move3,..moveN when you output to the browser, and the
same upon receipt from the client. let me rearrange:

 <script>
 <!--
   function selectAll() {
    if (document.imageForm.select_all.checked) {
    for (i = 0; i < moveElement.length; i++) {
	var moveElement = eval("document.imageForm.move" + i);
      moveElement.checked = true;
     }
    document.imageForm.deselect_all.checked = false;
   }
  }
 </script>

See how that treats you...

~C

> -----Original Message-----
> From: Phillip Powell [mailto:phillip.powell at adnet-sys.com]
> Sent: Tuesday, April 13, 2004 5:39 PM
> To: NYPHP Talk
> Subject: Re: [nycphp-talk] Javascript "select all" feature?
> 
> 
> Following are all of the variations I tried using Javascript:
> [Quote]
> <script>
> <!--
>   function selectAll() {
>    if (document.imageForm.select_all.checked) {
>     var moveElement = eval("document.imageForm.move" + i);
>     for (i = 0; i < moveElement.length; i++) {
>      moveElement[i].checked = true;
>     }
>    document.imageForm.deselect_all.checked = false;
>   }
>  }
> </script>
> 
> <script>
> <!--
>   function selectAll() {
>    if (document.imageForm.select_all.checked) {
>     var moveElement = eval("document.imageForm.move\[" + i + "\]");
>     for (i = 0; i < moveElement.length; i++) {
>      moveElement[i].checked = true;
>     }
>    document.imageForm.deselect_all.checked = false;
>   }
>  }
> </script>
> 
> <script>
> <!--
>   function selectAll() {
>    if (document.imageForm.select_all.checked) {
>     var moveElement = eval("document.imageForm.move\[\]");
>     for (i = 0; i < moveElement.length; i++) {
>      moveElement[i].checked = true;
>     }
>    document.imageForm.deselect_all.checked = false;
>   }
>  }
> </script>
> 
> <script>
> <!--
>   function selectAll() {
>    if (document.imageForm.select_all.checked) {
>     var moveElement = eval("document.imageForm.move\[\]");
>     alert(moveElement);
>     for (i = 0; i < moveElement.length; i++) {
>      moveElement[i].checked = true;
>     }
>    document.imageForm.deselect_all.checked = false;
>   }
>  }
> </script>
> [/Quote]
> 
> Every single one of these failed.  The alert() didn't even show up.  
> Failed in all browsers including Mozilla.
> 
> The following *works*.. but only in Mozilla and not in IE, Opera nor 
> Konqueror:
> 
> [Quote]
> <script>
> <!--
>   function selectAll() {
>    if (document.imageForm.select_all.checked) {
>     var moveElement = eval("document.imageForm.elements['move[]']");
>     alert(moveElement);
>     for (i = 0; i < moveElement.length; i++) {
>      moveElement[i].checked = true;
>     }
>    document.imageForm.deselect_all.checked = false;
>   }
>  }
> </script>
> [/Quote]
> 
> I'm beginning to believe that the PHP array form element 
> construct works 
> only in Mozilla because it's non-M$.
> 
> Phil
> 
> Chris Bielanski wrote:
> 
> >If that didn't work, then I think the next step on the road 
> to salvation
> >lies in the precipitous use of the eval() function within a for loop:
> >for(var i; i < something; i++)
> >{
> >	var obj = eval('document.forms[0].move'+i);
> >	// etc etc...
> >}
> >
> >This is an evil slimy hack but so long as you're in control 
> of the form
> >variables, it will take the tedium out of catching each form element.
> >
> >~C
> >  
> >
> >>-----Original Message-----
> >>From: Phillip Powell [mailto:phillip.powell at adnet-sys.com]
> >>Sent: Tuesday, April 13, 2004 5:19 PM
> >>To: NYPHP Talk
> >>Subject: Re: [nycphp-talk] Javascript "select all" feature?
> >>
> >>
> >>Your code implementations work!  In Mozilla only.. :(  Fails in IE, 
> >>Opera and Konqueror.. :(
> >>
> >>Apparently IE, Opera and Konqueror look for a form element 
> name to be 
> >>alphanumeric construct only (e.g. "move", "move0", "move_move", 
> >>"move-move"), but not "move[]", whereas Mozilla (and I 
> >>believe Netscape 
> >>but can't test that to know) are more forgiving of "move[]"..
> >>
> >>I've tried numerous script examples and they all work in 
> Mozilla and 
> >>fail in IE the moment I use "move[]" instead of "move".
> >>
> >>Phil
> >>
> >>
> >>
> >><script>
> >><!--
> >>  function selectAll(formElementName) {
> >>   if (document.imageForm.select_all.checked) {
> >>    for (i = 0; i < document.imageForm.length; i++) {
> >>     if (document.imageForm.elements[i].type == 'checkbox' && 
> >>document.imageForm.elements[i].name == formElementName) {
> >>      document.imageForm.elements[i].checked = true;
> >>     }
> >>    }
> >>    document.imageForm.deselect_all.checked = false;
> >>  }
> >> }
> >>
> >> function deSelectAll(formElementName) {
> >>  if (!document.imageForm.select_all.checked || 
> >>document.imageForm.deselect_all.checked) {
> >>   for (i = 0; i < document.imageForm.length; i++) {
> >>    if (document.imageForm.elements[i].type == 'checkbox' && 
> >>document.imageForm.elements[i].name == formElementName) {
> >>     document.imageForm.elements[i].checked = false;
> >>    }
> >>   }
> >>   document.imageForm.select_all.checked = false;
> >>  }
> >> }
> >>//-->
> >></script>
> >>
> >>
> >>
> >>Wellington Fan wrote:
> >>
> >>    
> >>
> >>>Try this:
> >>>
> >>>
> >>><script>
> >>><!--
> >>>	function selectAll(f,n,v) {
> >>>		var chk   = ( v == null ? true : v );
> >>>		for (i = 0; i < f.elements.length; i++) {
> >>>			if( f.elements[i].type == 'checkbox' &&
> >>>f.elements[i].name == n ) {
> >>>				f.elements[i].checked = chk;
> >>>			}
> >>>		}
> >>>	}
> >>>//-->
> >>></script>
> >>>
> >>><form>
> >>><input type="text" name="move[]"><br>
> >>><input type="checkbox" name="move[]"><br>
> >>><input type="checkbox" name="move[]"><br>
> >>><input type="checkbox" name="move[]"><br>
> >>><input type="checkbox" name="move[]"><br>
> >>><input type="radio" name="move[]"><br>
> >>><input type="checkbox" name="select[]"><br>
> >>><input type="checkbox" name="select[]"><br>
> >>><input type="checkbox" name="select[]"><br>
> >>><input type="checkbox" name="select[]"><br>
> >>><input type="button" onClick="selectAll(this.form,'move[]')" 
> >>>      
> >>>
> >>name="butt"
> >>    
> >>
> >>>value="check em">
> >>><input type="button" onClick="selectAll(this.form,'move[]',false)"
> >>>name="butt" value="clear em">
> >>></form>
> >>>
> >>>
> >>>So  selectAll(this.form,'move[]',false)   can take 2 or 3 args:
> >>>
> >>>1. - reference to the form
> >>>2. - the 'name' of the checkboxes to be set/cleared
> >>>3. - <optional, default is true> false to clear the checkboxes
> >>>
> >>>--
> >>>Wellington
> >>>
> >>>
> >>>
> >>>
> >>>
> >>>
> >>>
> >>>
> >>> 
> >>>
> >>>      
> >>>
> >>>>-----Original Message-----
> >>>>From: talk-bounces at lists.nyphp.org 
> >>>>[mailto:talk-bounces at lists.nyphp.org] On Behalf Of Phillip Powell
> >>>>Sent: Tuesday, April 13, 2004 4:04 PM
> >>>>To: NYPHP Talk
> >>>>Subject: Re: [nycphp-talk] Javascript "select all" feature?
> >>>>
> >>>>
> >>>>What about the other checkboxes, "select_all" and 
> >>>>"deselect_all", along 
> >>>>with other dynamically-generated checkbox groups that may 
> >>>>        
> >>>>
> >>also exist 
> >>    
> >>
> >>>>within this HTML resultset?
> >>>>
> >>>>Phil
> >>>>
> >>>>felix zaslavskiy wrote:
> >>>>
> >>>>   
> >>>>
> >>>>        
> >>>>
> >>>>>Try this:
> >>>>>for (var i = 0; i < document.imageForm.elements.length; i++){ 
> >>>>>if(document.imageForm.elements[i].type == 'checkbox'){
> >>>>>    document.imageForm.elements[i].checked = true;
> >>>>>}
> >>>>>}
> >>>>>
> >>>>>
> >>>>>     
> >>>>>
> >>>>>          
> >>>>>
> >>>>>>I am producing a form using PHP on the back end and 
> >>>>>>       
> >>>>>>
> >>>>>>            
> >>>>>>
> >>>>Javascript on the 
> >>>>   
> >>>>
> >>>>        
> >>>>
> >>>>>>front end.  The resulting script will come to the browser 
> >>>>>>       
> >>>>>>
> >>>>>>            
> >>>>>>
> >>>>as follows:
> >>>>   
> >>>>
> >>>>        
> >>>>
> >>>>>>[Code]
> >>>>>><script>
> >>>>>><!--
> >>>>>>function selectAll() {
> >>>>>> moveElement = eval("document.imageForm.move" + "[]");
> >>>>>> alert(moveElement);
> >>>>>> if (document.imageForm.select_all[0].checked) {
> >>>>>>  for (i = 0; i < document.imageForm.move.length; i++) {
> >>>>>>   document.imageForm.move[i].checked = true;
> >>>>>>  }
> >>>>>>}
> >>>>>>}
> >>>>>>
> >>>>>>function deSelectAll() {
> >>>>>>if (!document.imageForm.select_all[0].checked ||
> >>>>>>document.imageForm.deselect_all[0].checked) {
> >>>>>> for (i = 0; i < document.imageForm.move.length; i++) {
> >>>>>>  document.imageForm.move[i].checked = false;
> >>>>>> }
> >>>>>>}
> >>>>>>}
> >>>>>>//-->
> >>>>>></script>
> >>>>>>[/Code]
> >>>>>>
> >>>>>>This will work with a checkbox group that has to have 
> this naming 
> >>>>>>convention for PHP:
> >>>>>>
> >>>>>>[Code]
> >>>>>><input type=checkbox name=move[] value="myImage.gif"> - 
> >>>>>>       
> >>>>>>
> >>>>>>            
> >>>>>>
> >>>>Move? [/Code]
> >>>>   
> >>>>
> >>>>        
> >>>>
> >>>>>>I will also have a checkbox that will "select all" and 
> "de-select 
> >>>>>>all":
> >>>>>>
> >>>>>>[Code]
> >>>>>><input type=checkbox name=select_all value=1 
> >>>>>>       
> >>>>>>
> >>>>>>            
> >>>>>>
> >>>>onChange="selectAll()"> - 
> >>>>   
> >>>>
> >>>>        
> >>>>
> >>>>>>Select All <input type=checkbox name=deselect_all value=1 
> >>>>>>onChange="deSelectAll()">
> >>>>>>- De-select All
> >>>>>>[/Code]
> >>>>>>
> >>>>>>I am not familiar at how Javascript can work with 
> >>>>>>       
> >>>>>>
> >>>>>>            
> >>>>>>
> >>>>non-standard naming 
> >>>>   
> >>>>
> >>>>        
> >>>>
> >>>>>>conventions for event actions, can someone tell me what 
> I'm doing 
> >>>>>>wrong?  This fails at least in Mozilla 1.6
> >>>>>>
> >>>>>>Thanx
> >>>>>>Phil
> >>>>>>
> >>>>>>_______________________________________________
> >>>>>>talk mailing list
> >>>>>>talk at lists.nyphp.org 
> http://lists.nyphp.org/mailman/listinfo/talk
> >>>>>>
> >>>>>>  
> >>>>>>
> >>>>>>       
> >>>>>>
> >>>>>>            
> >>>>>>
> >>>>>     
> >>>>>
> >>>>>          
> >>>>>
> >>>>_______________________________________________
> >>>>talk mailing list
> >>>>talk at lists.nyphp.org http://lists.nyphp.org/mailman/listinfo/talk
> >>>>
> >>>>   
> >>>>
> >>>>        
> >>>>
> >>>_______________________________________________
> >>>talk mailing list
> >>>talk at lists.nyphp.org
> >>>http://lists.nyphp.org/mailman/listinfo/talk
> >>>
> >>> 
> >>>
> >>>      
> >>>
> >>_______________________________________________
> >>talk mailing list
> >>talk at lists.nyphp.org
> >>http://lists.nyphp.org/mailman/listinfo/talk
> >>
> >>    
> >>
> >_______________________________________________
> >talk mailing list
> >talk at lists.nyphp.org
> >http://lists.nyphp.org/mailman/listinfo/talk
> >
> >  
> >
> 
> 
> _______________________________________________
> talk mailing list
> talk at lists.nyphp.org
> http://lists.nyphp.org/mailman/listinfo/talk
> 



More information about the talk mailing list