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.writel n(Tarray.toStri ng);
var s;
s = prop
if (Left(s, 3) == "btn")
{
prop.height = "20px";
}
}
}

[Grant Wagner]

Re: Control collection in javascript

Robert Bull wrote:
[color=blue]
> 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.writel n(Tarray.toStri ng);
> var s;
> s = prop
> if (Left(s, 3) == "btn")
> {
> prop.height = "20px";
> }
> }
> }[/color]

<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="yourFormN ame">
<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 <gwagner@agrico reunited.com>
comp.lang.javas cript FAQ - http://jibbering.com/faq

[Fred Oz]

Re: Control collection in javascript

Grant Wagner wrote:
[snip][color=blue]
> <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>[/color]
[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]

Re: Control collection in javascript

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!