[thelist] Re: style.display = 'none' and form elements

Ben Gustafson Ben_Gustafson at lionbridge.com
Wed Oct 8 10:59:05 CDT 2003


Hello Joe and Nelson,

Thanks for your responses. Both were right on the mark, but since I need to
be able to toggle existence of the form elements in question on and off
(something I didn't mention), using the disabled property is easier (at
least for me) than accessing the DOM and removing and replacing nodes.

--Ben

> I'm trying to set up a form validation routine where certain 
> form elements are removed from the page given user input. The 
> way I am hiding the elements is by using the style.display 
> property. My understanding of display is that display = 
> 'none' should take the element out of the document flow and 
> elements array entirely, as if it were not there at all. But 
> a simple test seems to show that this is not the case:
> 
> <html>
> <head>
> 	<script language="JavaScript1.2"><!--
> 	var elems = document.getElementsByTagName("input");
> 	function hide()
> 	{
> 		for (var i=0; i<elems.length; i++)
> 			if (elems[i].name == "inText")
> 				elems[i].style.display = 'none';
> 	}
> 	function checkIfHidden()
> 	{
> 		for (var i=0; i<elems.length; i++)
> 			alert(elems[i].name + ": " +
> elems[i].style.display);
> 		return true;
> 	}
> 	//--></script>
> </head>
> <body>
> <input type="button" name="hide" value="Hide" 
> onClick="hide();"> <form action="test.asp" name="test" 
> id="test" method="get" onSubmit="checkIfHidden();"> <input 
> type="text" name="inText"> <input type="submit" name="btn"> 
> </form> </body> </html>
> 
> The inText element is still found in the checkIfHidden() 
> loop, and it still gets put in the query string when the form 
> is submitted. I have tested this in IE6 and NS7.1 Am I 
> misunderstanding how display is used or what it does?
> 
> Thanks,
> 
> 
> --Ben

<snip>

> Hi Ben
> 
> I think the display property is just that - it controls how 
> the element 
> is displayed on the browser.  Your element will be hidden but it will 
> still be a structural part of the form.  What you could do is use the 
> DOM to remove the element - something like:
> 
> function hide()
>     {
>         for (var i=0; i<elems.length; i++)
>             if (elems[i].name == "inText")
>                 {
>                 nodeToRemove  = document.getElementById("inText");
>                 nodeToRemove.parentNode.removeChild(nodeToRemove);
>                 }
>     }
> 
> hth
> 
> joe

<snip>

> Hi Ben,
> 
<snip>
> I don't think an element with display:none should be removed from the 
> DOM. As you say, it's removed from the document flow, check this out:
> 
> [http://www.w3.org/TR/CSS2/visuren.html#display-prop]
> <quote>
> - none:
> This value causes an element to generate no boxes in the formatting 
> structure (i.e., the element has no effect on layout).  Descendant 
> elements do not generate any boxes either; this behavior 
> cannot be overridden by setting the 'display' property on the 
> descendants.
> 
> Please note that a display of 'none' does not create an 
> invisible box; it creates no box at all. CSS includes 
> mechanisms that enable an element to generate boxes in the 
> formatting structure that affect formatting but are not 
> visible themselves. Please consult the section on visibility 
> for details. </quote>
> 
<snip>
> 
> [http://www.w3.org/TR/html4/interact/forms.html#h-17.2]
> <quote>
> When a form is submitted for processing, some controls have 
> their name 
> paired with their current value and these pairs are submitted 
> with the 
> form. Those controls for which name/value pairs are submitted 
> are called 
> successful controls.
> </quote>
> 
> AND:
> 
> [http://www.w3.org/TR/html4/interact/forms.html#successful-controls]
> <quote>
> A successful control is "valid" for submission. Every 
> successful control 
> has its control name paired with its current value as part of the 
> submitted form data set. A successful control must be defined 
> within a 
> FORM element and must have a control name.
> </quote>
> 
> However, a different story is that of *disabled* form elements:
> 
> [http://www.w3.org/TR/html4/interact/forms.html#successful-controls]
> <quote>
> Controls that are disabled cannot be successful.
> </quote>
> 
<snip>
> -- 
> regards,
> 
> ------------------------------------------------------------
> Nelson Rodríguez-Peña A.
> Diseño y Desarrollo Web y Multimedia
> ------------------------------------------------------------


More information about the thelist mailing list