Forum Moderators: open

Message Too Old, No Replies

Applying attributes to children or a span

         

Greven

8:56 pm on Apr 12, 2005 (gmt 0)

10+ Year Member



I have a table with form elements in it wrapped in a span, and I have it so you can toggle whether the span displays or not through an onclick of a title. I also have a function that validates all the form fields to ensure that no value of "" is entered, but I want it to ignore the fields if they are not being displayed. My validation is as such:


function validate_forms()
{

for ( i = 0; i < document.forms.length; i++)
{
elements = document.forms[i];

for( n = 0; n < elements.length ; n++)
{
if ( elements[n].name == "req" && elements[n].value == "")
{
elements[n].focus();
return false;
}
}

}
return true;
}


I have tried adding things such as " && if ( elements[n].currentStyle.display!= "none")", but in the code I use to hide elements


span.style.display = "none";

does not apply to the elements wrapped in the span. Is there a way to either make it apply to everything within it or to check the value of the span in way of a property of the element?

For example, something like this would be optimal:

if elements[n].parentspan.style.display!= "none"

or

span.style.display = "none";
for ( i = 0; i < span.childNode.length ; i++)
span.childNode[i].display = "none"l;

Thanks in advance.

Greven

8:59 pm on Apr 13, 2005 (gmt 0)

10+ Year Member



I've change the css to be:

span.confighide *

This applies the display: none to all the children, yet when I change the class through the javascript to the span.configshow *, it will not apply to the children elements, thereby making them visible. Any ideas?

Greven

9:33 pm on Apr 13, 2005 (gmt 0)

10+ Year Member



N/M, I got it:

if ( elements[n].name == "req" && elements[n].value == "" && elements[n].parentNode.parentNode.parentNode.parentNode.parentNode.style.display!= "none")

Rambo Tribble

9:37 pm on Apr 13, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Actually, you shouldn't put a table inside a span. It isn't valid markup to have a block element contained within an inline element. Use a div, p, or other block element as a container for your table.

Rambo Tribble

11:04 pm on Apr 13, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Here's a quick example of a recursive algorithm to climb the node tree checking the currently applied display status on antecedents to the element the function is called upon (as well as the element itself). It would allow you to climb a chain of elements of unknown length, taking action if any direct antecedent had a specific property.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function stepBack(targ){
while(targ.tagName.toUpperCase()!='HTML'){
if(targ.currentStyle){
disp_var=targ.currentStyle.display;
}else{
disp_var=window.getComputedStyle(targ, null).display;
}
alert(targ.tagName+'\n'+disp_var);
targ=targ.parentNode;
}
alert(targ.tagName+'\nthe end of line');
}
</script>
</head>
<body>
<div>
<div>
<h2><a href="#" onclick="stepBack(this);">test stepBack</a></h2>
</div>
</div>
</body>
</html>

Rambo Tribble

12:07 am on Apr 14, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Oh, by the way, disregard my inclusion of the <p></p> element as a container for a table; use a <div></div>.