Announcement

**DaveyErwin** · Sep 13, 2011, 09:36 AM

Originally posted by Mike1985 View Post

Hi

I've got about 40 check-boxes on my 1 form. These check-boxes all have names (obviously) but they are NOT all unique names. The number of UNIQUE names on my form is probably around 8 or 9 (the actual number is NOT important). Because some check-boxes use the same names as other. It's set up this way, please don't ask me to change it, I can't change it.

What's the syntax/method for looping through all the names? I was thinking I should do maybe a "for" loop;

But I don't know how to hold a variable of the unique names to start with. Can someone help please?

No need to chang it , names are not required to be
unique , ids are required to be unique.

One way is to loop through the form elements getting
their names as you go.

Probably not what you are askig because I don't
fully understand your requirements
(seeing some code would help)
but, you would use an array to hold
the "unique names".

Help me help you.

**Mike1985** · Sep 13, 2011, 10:30 AM

Great. So I need an array. I've never seen an arry in Javascript so I'm going to struggle...

Here's is a reduced version of my HTML;

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style>
#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
	margin:0px;
	list-style:none;
	padding:0px 1px 1px 0px;
	background-color:#F1F1F1;
	background-repeat:repeat;
	border-color:#A6A6A6;
	border-width:0px;
	border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
	display:block;
	zoom:1;
	float: left;
}
ul.pureCssMenu ul{
	width:137.55px;
}
ul.pureCssMenu li{
	display:block;
	margin:1px 0px 0px 1px;
	font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
	display:block;
	vertical-align:middle;
	background-color:BBBBBB;
	border-width:0px;
	border-color:#FCEEB0;
	border-style:solid;
	text-align:left;
	text-decoration:none;
	padding:5px;
	_padding-left:0;
	font:normal 11px Arial;
	color: #000000;
	text-decoration:none;
	cursor:pointer;
}
ul.pureCssMenu span{
	overflow:hidden;
}
ul.pureCssMenu li {
	float:left;
}
ul.pureCssMenu ul li {
	float:none;
}
ul.pureCssMenu ul a {
	text-align:left;
	white-space:nowrap;
}
ul.pureCssMenu li.sep{
	text-align:left;
	padding:0px;
	line-height:0;
	height:100%;
}
ul.pureCssMenu li.sep span{
	float:none;	padding-right:0;
	width:3;
	height:100%;
	display:inline-block;
	background-color:#A6A6A6;	background-image:none;}
ul.pureCssMenu ul li.sep span{
	width:100%;
	height:3;
}
ul.pureCssMenu li:hover{
	position:relative;
}
ul.pureCssMenu li:hover>a{
	background-color:#BFBFBF;
	border-color:#4C99AB;
	border-style:solid;
	font:normal 11px Arial;
	color: #FF0000;
	text-decoration:none;
}
ul.pureCssMenu li a:hover{
	position:relative;
	background-color:#BFBFBF;
	border-color:#4C99AB;
	border-style:solid;
	font:normal 11px Arial;
	color: #FF0000;
	text-decoration:none;
}
ul.pureCssMenu li.dis a {
	color: #AAAAAA !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:5px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def  {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul{display:block}
ul.pureCssMenu a:hover ul ul{display:none}
ul.pureCssMenu span{
	display:block;
	background-image:url(./images/arrv_blue_2.gif);
	background-position:right center;
	background-repeat: no-repeat;
   padding-right:8px;}
ul.pureCssMenu li:hover>a>span{	background-image:url(./images/arrv_white_2.gif);
}
ul.pureCssMenu a:hover span{	_background-image:url(./images/arrv_white_2.gif)}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_blue_2.gif)}
ul.pureCssMenu ul li:hover > a span{	background-image:url(./images/arr_white_2.gif);}
ul.pureCssMenu table a:hover span,ul.pureCssMenu table a:hover a:hover span{background-image:url(./images/arr_white_2.gif)}
ul.pureCssMenu table a:hover table span{background-image:url(./images/arr_blue_2.gif)}
ul.pureCssMenu li a.pureCssMenui0{
font:n;
}
ul.pureCssMenu li a.pureCssMenui0:hover{
font:o;
}
</style>

<title>Untitled Document</title>

<script type="text/javascript">



</script> 

</head>
 
<body>
 

<form style="width:75%;margin:0px;" id="drag_n_drop_form" name="drag_n_drop_form" action="submit.php" method="POST" accept-charset="utf-8">
<ul class="pureCssMenu pureCssMenum">
<li class="pureCssMenui0"><a class="pureCssMenui0" href="#"><span>Advanced</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">

 
 
<li class="pureCssMenui" id="15" name="FilterField"><a class="pureCssMenui" href="#"><span>Age (grouped)</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
				   <ul class="pureCssMenum" style="width:130%; overflow-y:auto; overflow-x:hidden; max-height:300px; "><li class="pureCssMenui">
						<a class="pureCssMenui" style="background-color:#FFFFFF;" href="#">
							<span style="text-align:center;">
								<div>
									<input id="filter-button" style="background-color:#FFFFFF;border:0px solid black;font-size:9px;" type="button" onclick="SetAllCheckBoxes('drag_n_drop_form', 'chk_AGEGRP=', true);" value="Tick All">
									<div style="color:#000000;display:inline;margin:-2px;">|</div>
									<input id="filter-button" style="background-color:#FFFFFF;border:0px solid black;font-size:9px;" type="button" onclick="SetAllCheckBoxes('drag_n_drop_form', 'chk_AGEGRP=', false);" value="Tick None">
									<div style="color:#000000;display:inline;margin:-2px;">|</div>
									<input id="filter-button" style="background-color:#FFFFFF;border:0px solid black;font-size:9px;" type="submit" name="submitform" value="Apply" id="submitform">
								</div>
							 </span>
						</a>
				   </li><li class="pureCssMenui"><a class="pureCssMenui" href="#"><input type='checkbox' id='chk_AGEGRP=Under 18' name='chk_AGEGRP' value='AGEGRP=Under 18'
 checked onclick=" checkBoxes(this);"><label for='chk_AGEGRP=Under 18'>Under 18</label><BR>
</a></li><li class="pureCssMenui"><a class="pureCssMenui" href="#"><input type='checkbox' id='chk_AGEGRP=18-19' name='chk_AGEGRP' value='AGEGRP=18-19'
 checked onclick=" checkBoxes(this);"><label for='chk_AGEGRP=18-19'>18-19</label><BR>
</a></li><li class="pureCssMenui"><a class="pureCssMenui" href="#"><input type='checkbox' id='chk_AGEGRP=20-24' name='chk_AGEGRP' value='AGEGRP=20-24'
 checked onclick=" checkBoxes(this);"><label for='chk_AGEGRP=20-24'>20-24</label><BR>
</a></li><li class="pureCssMenui"><a class="pureCssMenui" href="#"><input type='checkbox' id='chk_AGEGRP=25-29' name='chk_AGEGRP' value='AGEGRP=25-29'
 checked onclick=" checkBoxes(this);"><label for='chk_AGEGRP=25-29'>25-29</label><BR>
</a></li><li class="pureCssMenui"><a class="pureCssMenui" href="#"><input type='checkbox' id='chk_AGEGRP=30-34' name='chk_AGEGRP' value='AGEGRP=30-34'
 checked onclick=" checkBoxes(this);"><label for='chk_AGEGRP=30-34'>30-34</label><BR>
</a></li><li class="pureCssMenui"><a class="pureCssMenui" href="#"><input type='checkbox' id='chk_AGEGRP=35-39' name='chk_AGEGRP' value='AGEGRP=35-39'
 checked onclick=" checkBoxes(this);"><label for='chk_AGEGRP=35-39'>35-39</label><BR>
</a></li><li class="pureCssMenui"><a class="pureCssMenui" href="#"><input type='checkbox' id='chk_AGEGRP=40-44' name='chk_AGEGRP' value='AGEGRP=40-44'
 checked onclick=" checkBoxes(this);"><label for='chk_AGEGRP=40-44'>40-44</label><BR>
</a></li><li class="pureCssMenui"><a class="pureCssMenui" href="#"><input type='checkbox' id='chk_AGEGRP=45-49' name='chk_AGEGRP' value='AGEGRP=45-49'
 checked onclick=" checkBoxes(this);"><label for='chk_AGEGRP=45-49'>45-49</label><BR>
</a></li><li class="pureCssMenui"><a class="pureCssMenui" href="#"><input type='checkbox' id='chk_AGEGRP=50-54' name='chk_AGEGRP' value='AGEGRP=50-54'
 checked onclick=" checkBoxes(this);"><label for='chk_AGEGRP=50-54'>50-54</label><BR>
</a></li><li class="pureCssMenui"><a class="pureCssMenui" href="#"><input type='checkbox' id='chk_AGEGRP=55 and over' name='chk_AGEGRP' value='AGEGRP=55 and over'
 checked onclick=" checkBoxes(this);"><label for='chk_AGEGRP=55 and over'>55 and over</label><BR>
</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
 
 
 
<li class="pureCssMenui" id="2" name="FilterField"><a class="pureCssMenui" href="#"><span>Ethnic Origin</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
				   <ul class="pureCssMenum" style="width:130%; overflow-y:auto; overflow-x:hidden; max-height:300px; "><li class="pureCssMenui">
						<a class="pureCssMenui" style="background-color:#FFFFFF;" href="#">
							<span style="text-align:center;">
								<div>
									<input id="filter-button" style="background-color:#FFFFFF;border:0px solid black;font-size:9px;" type="button" onclick="SetAllCheckBoxes('drag_n_drop_form', 'chk_ETHNICITY=', true);" value="Tick All">
									<div style="color:#000000;display:inline;margin:-2px;">|</div>
									<input id="filter-button" style="background-color:#FFFFFF;border:0px solid black;font-size:9px;" type="button" onclick="SetAllCheckBoxes('drag_n_drop_form', 'chk_ETHNICITY=', false);" value="Tick None">
									<div style="color:#000000;display:inline;margin:-2px;">|</div>
									<input id="filter-button" style="background-color:#FFFFFF;border:0px solid black;font-size:9px;" type="submit" name="submitform" value="Apply" id="submitform">
								</div>
							 </span>
						</a>
				   </li><li class="pureCssMenui"><a class="pureCssMenui" href="#"><input type='checkbox' id='chk_ETHNICITY=WHITE' name='chk_ETHNICITY' value='ETHNICITY=WHITE'
 checked onclick=" checkBoxes(this);"><label for='chk_ETHNICITY=WHITE'>White</label><BR>
</a></li><li class="pureCssMenui"><a class="pureCssMenui" href="#"><input type='checkbox' id='chk_ETHNICITY=EM' name='chk_ETHNICITY' value='ETHNICITY=EM'
 checked onclick=" checkBoxes(this);"><label for='chk_ETHNICITY=EM'>Ethnic Minorities</label><BR>
</a></li><li class="pureCssMenui"><a class="pureCssMenui" href="#"><input type='checkbox' id='chk_ETHNICITY=NOT KNOWN' name='chk_ETHNICITY' value='ETHNICITY=NOT KNOWN'
 checked onclick=" checkBoxes(this);"><label for='chk_ETHNICITY=NOT KNOWN'>Not Known</label><BR>
</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
 
 
 

 
<li class="pureCssMenui" id="4" name="FilterField"><a class="pureCssMenui" href="#"><span>Training Indicator</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
				   <ul class="pureCssMenum" style="width:130%; overflow-y:auto; overflow-x:hidden; max-height:300px; "><li class="pureCssMenui">
						<a class="pureCssMenui" style="background-color:#FFFFFF;" href="#">
							<span style="text-align:center;">
								<div>
									<input id="filter-button" style="background-color:#FFFFFF;border:0px solid black;font-size:9px;" type="button" onclick="SetAllCheckBoxes('drag_n_drop_form', 'chk_TRGIND=', true);" value="Tick All">
									<div style="color:#000000;display:inline;margin:-2px;">|</div>
									<input id="filter-button" style="background-color:#FFFFFF;border:0px solid black;font-size:9px;" type="button" onclick="SetAllCheckBoxes('drag_n_drop_form', 'chk_TRGIND=', false);" value="Tick None">
									<div style="color:#000000;display:inline;margin:-2px;">|</div>
									<input id="filter-button" style="background-color:#FFFFFF;border:0px solid black;font-size:9px;" type="submit" name="submitform" value="Apply" id="submitform">
								</div>
							 </span>
						</a>
				   </li><li class="pureCssMenui"><a class="pureCssMenui" href="#"><input type='checkbox' id='chk_TRGIND=TRAINED' name='chk_TRGIND' value='TRGIND=TRAINED'
 checked onclick=" checkBoxes(this);"><label for='chk_TRGIND=TRAINED'>Trained</label><BR>
</a></li><li class="pureCssMenui"><a class="pureCssMenui" href="#"><input type='checkbox' id='chk_TRGIND=UNTRAINED' name='chk_TRGIND' value='TRGIND=UNTRAINED'
 checked onclick=" checkBoxes(this);"><label for='chk_TRGIND=UNTRAINED'>Untrained</label><BR>
</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
 
 
 
 
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
 
</form>


</body>
</html>

Sorry it's massive but I couldn't figure out how to put an attachement on here (if you can!)

I want to loop through all the unique names. So my javascript will be something like

Code:

var a = AN-ARRAY-OF-UNIQUE-NAMES-FROM-MY-FORM

for (var i = 0; i < a.length; i++)
{
alert(a[i])
}

So that I get about a dozen pop-ups. One for every unique name on the form.

I don't know how to do the array part...

**DaveyErwin** · Sep 13, 2011, 10:51 AM

Here ya go .....
put this between the script tags you already have

Code:

function init(){
	var uniqueNames = new Array();
	var els=document.drag_n_drop_form.elements;
         var j = 1;
        for(var i = els.length;i--;){
		if(els[i].name && uniqueNames.toString().indexOf("," + els[i].name + ",") == -1){
			uniqueNames[j++] = els[i].name;			
			uniqueNames[j+1] = "";
			}		
	}
uniqueNames=uniqueNames.slice(1,uniqueNames.length-2);
alert(uniqueNames)
}}

add this to body tag
<body onload="init()">

This code only gives you the names of
form elements so you don't get the name
of li s or other style elements
By the way , where i live white
is an ethnic minority.

**Mike1985** · Sep 13, 2011, 12:06 PM

Oh I see. So you have to state the name of the form! i.e drag_n_drop. Yeah that never occourred to me.

I had to modify it slighty so it runs off an onclick event. Can you think of any reason why it is missing a couple of names though?

It's listing them in reverse order but missing out the last one and the 4th one . Seems very strange why it's missing out the 4th one.

Could you possibly comment the code as well so I can learn please? Right now I don't have a clue what it does...

**DaveyErwin** · Sep 13, 2011, 12:28 PM

It only gets name of form elements.
The missing ones are li s.
This is a feature not a bug.

Code:

function init(){
	var uniqueNames = new Array();//initializes new array
	var els=document.drag_n_drop_form.elements;//gets form elements
         var j = 1;//indexes array
        for(var i = els.length;i--;){
		if(els[i].name && uniqueNames.toString().indexOf("," + els[i].name + ",") == -1){//if named form element check if name is in array if not ...
			
			uniqueNames[j++] = els[i].name;	//add name to array		
			uniqueNames[j+1] = "";// put empty str in next index
			}		
	}
uniqueNames=uniqueNames.slice(1,uniqueNames.length-2);// remove empty indexes
alert(uniqueNames)
}}}

**Logic Ali** · Sep 13, 2011, 12:47 PM

So that I get about a dozen pop-ups. One for every unique name on the form.

You don't need an array, the form already has one.

Just pass this function a refence to your form.

Code:

<script type="text/javascript">

function showElemNames( formRef )
{
   var elems = formRef.elements;

   for( var i = 0; elems[ i ]; i += elems[ i ].name ? formRef[ elems[ i ].name ].length || 1 : 1 )
     alert( elems[ i ].name || '""' );
}

</script>

I suspect I'd better show you how to do that

This button must be inside the form:

Code:

<input type="button" value="Show" name="theButton" onclick="showElemNames(this.form)">

NOTE: IDs and names are not the same. Your form contains duplicate IDs which are not allowed.

**Old Pedant** · Sep 13, 2011, 05:54 PM

Here's another way to do it.

Code:

<script type="text/javascript">
function showElemNames( form )
{
    // if no form reference passed in, assume we will use first form on the page:
    if ( form == null ) form = document.forms[0];
    var unique = [ ]; // we will capture the unique element names in this array

    // loop through each element in the form
    for ( var e = 0; e < form.elements.length; ++e )
    {
        var curelem = form.elements[e]; // get one element
        var name = curelem.name; // get the *name* of that element
        if ( name != null && name.length > 0 ) /* assuming there is one */
        {
            // find all elements of that same name in the <form>:
            var elems = form.elements[name];
            // if there is only one, then it is of course unique:
            if ( elems.length == null || elems.length == 1 )
            {
                unique.push( name );
            } else {
                // otherwise, only capture the name the first time:
                if ( elems[0] == curelem ) unique.push(name); 
            }
        } // end of doing this only for named elements
    } // end of loop on all elements
    document.getElementById("uniqueList").innerHTML = unique.join("<br/>");
    // or could do an alert(unique) of course.
}
</script>
</head>
<body>
<form>
    <input type="checkbox" name="CB1"/>
    <input type="checkbox" name="CB1"/>
    <input type="checkbox" name="CB1"/>
    <input type="checkbox" name="CB1"/>
    <br/>
    <input name="TXT1" />
    <br/>
    <input type="radio" name="RB1" value="1"/>
    <input type="radio" name="RB1" value="2"/>
    <input type="radio" name="RB1" value="3"/>
    <br/>
    <input type="button" value="show me" onclick="showElemNames(this.form);"/>
</form>
The list:
<div id="uniqueList"></div>
</body>
</html>

**DaveyErwin** · Sep 13, 2011, 06:48 PM

Originally posted by Mike1985 View Post

So that I get about a dozen pop-ups. One for every unique name on the form.

I missed that part

Code:

function init(){
        var els=document.drag_n_drop_form.elements;
        for(var j = "" , i = els.length;i--;){
	   if(j.indexOf(els[i].name) == -1){
	     alert(els[i].name);
	     j += els[i].name;
	   }
	}
}

Usually names are for form elements.

**Old Pedant** · Sep 13, 2011, 07:05 PM

Ehhh...Davey, that may work for his particular case, but it could cause one grief in the general case.

Example:

Code:

<form>
<input name="one">
<input name="more">
<input name="onemore">
<input name="twosy">
<input name="two">
...

Your code would see that "onemore" and "two" were already in the j string of names and so not show them.

There's an easy fix, of course:

Code:

function init(){
        var els=document.drag_n_drop_form.elements;
        for(var j = "" , i = els.length;i--;){
                [COLOR="Red"]var test = "\t" + els[i].name + "\t";[/COLOR]	   if(j.indexOf([COLOR="Red"]test[/COLOR]) == -1){
	     alert(els[i].name);
	     j += [COLOR="Red"]test[/COLOR];
	   }
	}
}

By putting delimiters around the names, you won't get "false positives" any more.

**DaveyErwin** · Sep 13, 2011, 08:01 PM

Originally posted by Old PedAnt View Post

Ehhh...Davey, that may work for his particular case, but it could cause one grief in the general case.

Yes, that seems an eaey fix.

**Mike1985** · Sep 30, 2011, 08:55 AM

I tried to use your code Old Pedant but I had to abandon it as it's a bit of a hack. I can't actually use 'test' now and compare it against 'els' because 'test' seems to have a load of spaces before it - so they're not the same.

Never mind.

**Kor** · Sep 30, 2011, 09:09 AM

Nobody thought of document.getElementsByName() method?

getElementsByName « Javascript Methods « JavaScript Reference

http://www.java2s.com/Code/JavaScriptReference/Javascript-Methods/getElementsByName.htm

getElementsByName « Javascript Methods « JavaScript Reference

Ezine nyheter i Göteborg - Håll dig uppdaterad

http://www.ezineasp.net/Samples/Javascript/Javascript-DOM/Document-getElementsByName-Loop/Default.aspx

**Mike1985** · Sep 30, 2011, 09:25 AM

Well.... it's a little more complex than that. That'll loop through every name, I just wanted the unique ones.

**Kor** · Sep 30, 2011, 10:51 AM

Originally posted by Mike1985 View Post

Well.... it's a little more complex than that. That'll loop through every name, I just wanted the unique ones.

Then you should check if there is a second element within the collection

Code:

if(!document.getElementsByName('myname')[1]){
[COLOR="Green"]// that means there is a single name, and the element is [/COLOR][COLOR="Blue"]document.getElementsByName('myname')[0][/COLOR]
}

There is no alternative to the loop, a way or another. name is not id.

Announcement

Whats the best way to loop through all unique names on a form?

Whats the best way to loop through all unique names on a form?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment