Control collection in javascript

[Robert Bull]

I have a .net application that I am trying to add some javascript code
to for a client-side execution. What I want to do is resize all the
HTML text fields on my web form, but instead of writing a line for
each text box I would like to loop through a collection of controls
and resize the control if it is a text field. Is there a way to do
this in javascript? The function below is what I have been toying with
for the past couple of hours. Another idea was to use a css, but I
can't find an element for the text field. Thanks in advance for any
help.

function Test()
{
Tarray = new Object;
Tarray = document.Form1.children
for (var prop in Tarray)
{
//document.writeln(Tarray.toString);
var s;
s = prop
if (Left(s, 3) == "btn")
{
prop.height = "20px";
}
}
}

[Grant Wagner]

Robert Bull wrote:

I have a .net application that I am trying to add some javascript code
to for a client-side execution. What I want to do is resize all the
HTML text fields on my web form, but instead of writing a line for
each text box I would like to loop through a collection of controls
and resize the control if it is a text field. Is there a way to do
this in javascript? The function below is what I have been toying with
for the past couple of hours. Another idea was to use a css, but I
can't find an element for the text field. Thanks in advance for any
help.

function Test()
{
Tarray = new Object;
Tarray = document.Form1.children
for (var prop in Tarray)
{
//document.writeln(Tarray.toString);
var s;
s = prop
if (Left(s, 3) == "btn")
{
prop.height = "20px";
}
}
}

<script type="text/javascript">
function test() {
var f = document.forms['yourFormName'];
if (f) {
f = f.elements;
}
var i = f.length;
while (i-- > 0) {
if (f[i].type == 'text' && f[i].style) {
f[i].style.height = '2px';
}
}
}
</script>
<form name="yourFormName">
<input type="text" name="test1">
<input type="checkbox" name="test2">
<input type="radio" name="test3">
<input type="text" name="test4">
<input type="button" name="test5"
value="Set text input height" onclick="test();">
</form>

Tested and working in IE 6.0.2800, Firefox 1.0PR, Opera 7.54 and Mozilla
1.7.3

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq

[Fred Oz]

Grant Wagner wrote:
[snip]

<script type="text/javascript">
function test() {
var f = document.forms['yourFormName'];
if (f) {
f = f.elements;
}
var i = f.length;
while (i-- > 0) {
if (f[i].type == 'text' && f[i].style) {
f[i].style.height = '2px';
}
}
}
</script>

[snip]

A slightly more concise version is below (tested in Safari). It
assumes that you pass the reference to the form name when you call the
function.

e.g. test(this.form)

if you are calling it from a button in a form:

<script type="text/javascript">
function test(f) {
if (document.forms) {
for (var i=0; i<f.length; i++) {
if (f[i].type == 'text' && f[i].style) {
f[i].style.height = '2px';
}
}
}
}
</script>

[Rob]

Thanks a lot Grant...it worked like a charm.

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!