[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