...

View Full Version : Whats the best way to loop through all unique names on a form?



Mike1985
09-13-2011, 02:09 PM
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;


for (var i = 0; i < fieldName.length; i++)

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

DaveyErwin
09-13-2011, 02:36 PM
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
09-13-2011, 03:30 PM
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;



<!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



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
09-13-2011, 03:51 PM
Here ya go .....
put this between the script tags you already have


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
09-13-2011, 05: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
09-13-2011, 05:28 PM
It only gets name of form elements.
The missing ones are li s.
This is a feature not a bug.


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
09-13-2011, 05: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.

<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:
<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
09-13-2011, 10:54 PM
Here's another way to do it.



<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
09-13-2011, 11:48 PM
So that I get about a dozen pop-ups. One for every unique name on the form.


I missed that part :(



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
09-14-2011, 12:05 AM
Ehhh...Davey, that may work for his particular case, but it could cause one grief in the general case.

Example:


<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:


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

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

DaveyErwin
09-14-2011, 01:01 AM
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
09-30-2011, 01:55 PM
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
09-30-2011, 02:09 PM
Nobody thought of document.getElementsByName() method? :)
http://www.java2s.com/Code/JavaScriptReference/Javascript-Methods/getElementsByName.htm
http://www.ezineasp.net/Samples/Javascript/Javascript-DOM/Document-getElementsByName-Loop/Default.aspx

Mike1985
09-30-2011, 02:25 PM
Well.... it's a little more complex than that. That'll loop through every name, I just wanted the unique ones.

Kor
09-30-2011, 03:51 PM
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


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

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum