Retrieving the ID names from within a form

**Lee** · Jul 20 '05, 11:02 AM

Re: Retrieving the ID names from within a form

CES said:[color=blue]
>
>All,
>
>Is their a way of iterating thru each tag within a form and returning the
>value given in the id property, by that I mean the below html would return
>the values idBoxOne, idBoxTwo, idBoxThree from the FormXX form.
>
><form name="FormXX" method="post" action="default .htm">
><input id="idBoxOne" name="bxOne" type="text">
><input id="idBoxTwo" name="bxTwo" type="text">
><input id="idBoxThree " name="bxThree" type="text">
></form>
>
>Up to this point I've only used JavaScript to change CSS properties,
>innerHTML and outerHTML so I'm rather new to the game.
>
>Any help is always appreciated.[/color]

<html>
<head>
<script type="text/javascript">
function listIDs(f){
var msg="";
for(var i=0;i<f.element s.length;i++){
msg+=i+": id: "+f.element s[i].id
+" name: "+f.element s[i].name
+" type: "+f.element s[i].type
+"\n";
}
alert(msg);
}
</script>
</head>
<body onload="listIDs (document.forms['FormXX'])">
<form name="FormXX" method="post" action="default .htm">
<input id="idBoxOne" name="bxOne" type="text">
<input id="idBoxTwo" name="bxTwo" type="text">
<input id="idBoxThree " name="bxThree" type="text">
</form>
</body>
</html>

**CES** · Jul 20 '05, 11:03 AM

Re: Retrieving the ID names from within a form

All,
Just incase anyone is interested this is the final code. I needed to change
the input id in the html below from id="idBoxOne" to id="id_BoxOne" .

This returns an array of any form tag that has an id that starts with id_ .
The only real change made to Lee's code was insted of passing the name to
the function using listIDs(documen t.forms['FormXX'])", I got the name of the
first form by using document.forms[0].name, so the onLoad event would now be
onLoad=listIDs( ).

Thanks for the starting point Lee.

CES

function listIDs(){
var a = document.forms[0].name; // Retrevies the name of the first form
on the page
var f = document.forms[a];
var nArray = new Array(); //Initializes the array
var z = 0; //Sets the array index number
for(var i = 0;i < f.elements.leng th;i++){ //Loops thru all ellements in
the form
var x = f.elements[i].id; // Assigns the value of the forms element to
var
var y = x.split("_"); //Determines if the Element is to be tracked, all
tracked elements have the "id_"
if(y[0] == "id"){ //If the left portion of the is is id then it adds
right item to array
nArray[z] = y[1];
z++ // increments by one
}
}
return nArray;
}

CES
"Lee" <REM0VElbspamtr ap@cox.net> wrote in message
news:bm2dap096e @drn.newsguy.co m...[color=blue]
> CES said:[color=green]
> >
> >All,
> >
> >Is their a way of iterating thru each tag within a form and returning the
> >value given in the id property, by that I mean the below html would[/color][/color]
return[color=blue][color=green]
> >the values idBoxOne, idBoxTwo, idBoxThree from the FormXX form.
> >
> ><form name="FormXX" method="post" action="default .htm">
> ><input id="idBoxOne" name="bxOne" type="text">
> ><input id="idBoxTwo" name="bxTwo" type="text">
> ><input id="idBoxThree " name="bxThree" type="text">
> ></form>
> >
> >Up to this point I've only used JavaScript to change CSS properties,
> >innerHTML and outerHTML so I'm rather new to the game.
> >
> >Any help is always appreciated.[/color]
>
> <html>
> <head>
> <script type="text/javascript">
> function listIDs(f){
> var msg="";
> for(var i=0;i<f.element s.length;i++){
> msg+=i+": id: "+f.element s[i].id
> +" name: "+f.element s[i].name
> +" type: "+f.element s[i].type
> +"\n";
> }
> alert(msg);
> }
> </script>
> </head>
> <body onload="listIDs (document.forms['FormXX'])">
> <form name="FormXX" method="post" action="default .htm">
> <input id="idBoxOne" name="bxOne" type="text">
> <input id="idBoxTwo" name="bxTwo" type="text">
> <input id="idBoxThree " name="bxThree" type="text">
> </form>
> </body>
> </html>
>[/color]

**Richard Cornford** · Jul 20 '05, 11:03 AM

Re: Retrieving the ID names from within a form

"CES" <None@noSpam.co m> wrote in message
news:g_WdnXK7u8 nXdBiiRVn-hg@speakeasy.ne t...
<snip>[color=blue]
>This returns an array of any form tag that has an id that starts
>with id_ . The only real change made to Lee's code was insted of
>passing the name to the function using listIDs(documen t.forms[
>'FormXX'])", I got the name of the first form by using
>document.for ms[0].name, so the onLoad event would now be
> onLoad=listIDs( ).[/color]
<snip>[color=blue]
> function listIDs(){
> var a = document.forms[0].name; // Retrevies the name of the
> // first form on the page
> var f = document.forms[a];[/color]

Is there any point in doing this? The only circumstances where
document.forms[0] will not refer to the same object as
document.forms[document.forms[0].name] is when more than one form on the
page has the same name, and in that case the rest of your code is going
to fall over anyway. Wouldn't it make more sense to use - var f =
document.forms[0]; -. However, every use of - f- is followed with -
..elements - so why not assign a reference to the fomr's elements
collection to a local variable instead of a reference to the form
itself:-

var els = document.forms[0].elements;
.. . .
for(var i = 0;i < els.length;i++) {
.. . .
var x = els[i].id;
[color=blue]
> var nArray = new Array(); //Initializes the array[/color]

Array literal notation:-

var nArray = []; //New empty array.
[color=blue]
> var z = 0; //Sets the array index number[/color]

Maybe you don't need - var z -.
[color=blue]
> for(var i = 0;i < f.elements.leng th;i++){ //Loops thru all[/color]
ellements[color=blue]
> //in the form
> var x = f.elements[i].id; // Assigns the value of
> // the forms element to var
> var y = x.split("_"); //Determines if the Element is to be[/color]
tracked,[color=blue]
> //all tracked elements have the "id_"
> if(y[0] == "id"){ //If the left portion of the is is id then
> //it adds right item to array
> nArray[z] = y[1];
> z++ // increments by one[/color]
<snip>

Could be combined into:-

nArray[z++] = y[1];

-but you could use:-

nArray[nArray.length] = y[1];

- and not need to keep track of how long the array is.

Richard.

Retrieving the ID names from within a form

Retrieving the ID names from within a form

Comment

Comment

Comment