is element visible?

cfgoodies · Dec 5, 2001

I've got a form that has fields inside of <div> tags.
------------------------------------
<div id="set_1" style="display:none">
<input type="text" name="foo" />
</div>

<div id="set_2">
<input type="text" name="bar" />
</div>
------------------------------------
How can I bring focus to the first "visible" form field?

Thanks in advance.

GIGN · Dec 5, 2001

Loop thru the form.elements.array checking the display value, the first time you encounter what you want - or !none, set focus ,then break out of the loop - done.

[bb]

cfgoodies · Dec 5, 2001

I've tried this, but it doesn't work.

for (a = 1; a <= document.wiz.elements.length; a++) {
if (document.wiz.elements[a].style.display != '') {
document.wiz.elements[a].focus();
break;
}
}

I get the error: 'document.wiz.elements[...].style' is not an object.

Thanks for your help.

GIGN · Dec 5, 2001

Check you have the Form tag in there, and it is named correctly - and try document.forms["wiz"] too if that still won't work.

for (var a = 1; a <= document.wiz.elements.length; a++) {
if (document.wiz.elements[a].style.display != 'none') {
document.wiz.elements[a].focus();
break;
}
}

[bb]

cfgoodies · Dec 5, 2001

I tried both and couldn't get it to work. The questionable code is below. I took out everything that was irrelevant. I'm executing this code in IE 5.5 if that makes a difference. Again, I really appreciate your help.

<html>
<head>
<title>Test</title>
<script language="JavaScript" type="text/javascript">
function begin() {
set_1.style.display = 'none';
for (a = 0; a <= document.wiz.elements.length; a++) {
if (document.forms["wiz"].elements[a].style.display != 'none') {
document.forms["wiz"].elements[a].focus();
break;
}
}
}
</script>
</head>
<body onload="Javascript:begin();">
<form name="wiz" action="blank.cfm" method="post">

<div id="set_1">

Option: <input type="text" name="option" />
</div>

<div id="set_2">
Name: <input type="text" name="name" />
</div>

<div id="set_3">
Email: <input type="text" name="name" />
</div>

</form>

</body>
</html>

GIGN · Dec 5, 2001

It's because you have set the display on the div containing the input, instead of the form element.

Forget about the divs [and NS4.x] - and just hide the actual elements.

Then to hide the text too - access it as the previousSibling of the input.

Or you can carefully label the form elements and divs to match your loop - and hide them that way.

<bb>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

is element visible?

cfgoodies

Programmer

GIGN

Programmer

cfgoodies

Programmer

GIGN

Programmer

cfgoodies

Programmer

GIGN

Programmer

Similar threads

Part and Inventory Search

Sponsor