By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,453 Members | 961 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,453 IT Pros & Developers. It's quick & easy.

Retrieving the ID names from within a form

P: n/a
CES
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.

CES
Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Lee
CES said:

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.


<html>
<head>
<script type="text/javascript">
function listIDs(f){
var msg="";
for(var i=0;i<f.elements.length;i++){
msg+=i+": id: "+f.elements[i].id
+" name: "+f.elements[i].name
+" type: "+f.elements[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>

Jul 20 '05 #2

P: n/a
CES
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(document.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.length;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" <RE**************@cox.net> wrote in message
news:bm********@drn.newsguy.com...
CES said:

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


<html>
<head>
<script type="text/javascript">
function listIDs(f){
var msg="";
for(var i=0;i<f.elements.length;i++){
msg+=i+": id: "+f.elements[i].id
+" name: "+f.elements[i].name
+" type: "+f.elements[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>

Jul 20 '05 #3

P: n/a
"CES" <No**@noSpam.com> wrote in message
news:g_********************@speakeasy.net...
<snip>
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(document.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(). <snip> function listIDs(){
var a = document.forms[0].name; // Retrevies the name of the
// first form on the page
var f = document.forms[a];
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;
var nArray = new Array(); //Initializes the array
Array literal notation:-

var nArray = []; //New empty array.
var z = 0; //Sets the array index number
Maybe you don't need - var z -.
for(var i = 0;i < f.elements.length;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

<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.
Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.