Disabling everything in div section

[John Dalberg]

I have a webpage with a form. Depending on user selections at the top of
the page, the page will disable sections of the form. My plan is to put
each section between a <div></div>. Each section contains some collection
of form elements.

So if the user does not select some criteria, the related section of the
form gets disabled. In a typical Windows type of application these elements
get disabled and greyed out. What's the best way to do this in a webpage?
Can Javascript determine what form elements are in a div section and
disable these elements through a loop for example? I know I can disable
each element if I know its it but is there a way to find out all the IDs of
elements for some div section?

John Dalberg

[bobzimuta]

You're going to want to scan the child nodes of the DIV sections. For
instance, if the HTML looks like this:

<div id="div_1">
<input type="text" name="firstname">
<input type="text" name="lastname">
<p>ya ya ya</p>
</div>

in the DOM tree the DIV might look like:

DIV
|_input node (<input>)
|_input node (<input>)
|_text node (<p>)

I don't have my JS reference on me, but I'm pretty sure you'll want to
do something like

var div_to_disable = document.getElementById( 'div_1' );
var children = div_to_disable.childNodes;
for (var i = 0; i < children.length; i++)
{
// do stuff here ... such as :
if( children[i].type == 'text' )
children[i].disabled = true;
};

Please be aware, this is really off the cuff and not terribly accurate;
I did more of this a while back. If you're interested and continue to
do this kind of stuff, I'd really recommend getting O'Reilly's
javascript reference. You can do a lot to your DHTML using the DOM
methods. Hopefully this will get you in the right direction.

[RobG]

bobzimuta wrote:

You're going to want to scan the child nodes of the DIV sections. For
instance, if the HTML looks like this:

<div id="div_1">
<input type="text" name="firstname">
<input type="text" name="lastname">
<p>ya ya ya</p>
</div>

in the DOM tree the DIV might look like:

DIV
|_input node (<input>)
|_input node (<input>)
|_text node (<p>)

I don't have my JS reference on me, but I'm pretty sure you'll want to
do something like

var div_to_disable = document.getElementById( 'div_1' );
var children = div_to_disable.childNodes;

That will only grab the direct child nodes of 'div_1', form controls
nested deeper than that (say inside label elements, tables or divs) will
be descendants of the collection of nodes referenced by 'children'.

An alternative is to use a recursive function to travel down the tree
starting at 'div_to_disable', or to use getElementsByTagName('*') to
grab all the elements inside the div (older browsers may not support the
use of '*'). Loop through them and mdofiy the disabled attribute of
relevant elements.
/*
* id - string
* ID of element containing controls to disable/enable
*
* disabled - boolean
* true will disable, false will enable
*/

function setDisabled(id, disabled)
{
if ( !document.getElementById
|| !document.getElementsByTagName) return;

var nodesToDisable = {button :'', input :'', optgroup :'',
option :'', select :'', textarea :''};

var node, nodes;
var div = document.getElementById(id);
if (!div) return;

nodes = div.getElementsByTagName('*');
if (!nodes) return;

var i = nodes.length;
while (i--){
node = nodes[i];
if ( node.nodeName
&& node.nodeName.toLowerCase() in nodesToDisable ){
node.disabled = disabled;
}
}
}
Call with:

<input type="button" value="Disable div_1"
onclick="setDisabled('div_1', true)">

<input type="button" value="Enable div_1"
onclick="setDisabled('div_1', false)">
You could also put the names of nodes to disable in a string and test
with a regular expression, or put them in an array and loop through it.
[...]
--
Rob

[Thomas 'PointedEars' Lahn]

RobG wrote:

bobzimuta wrote:

var div_to_disable = document.getElementById( 'div_1' );
var children = div_to_disable.childNodes;
That will only grab the direct child nodes of 'div_1',

True.
form controls nested deeper than that (say inside label elements, tables
or divs) will be descendants of the collection of nodes referenced by
'children'.

No, they will be descendants of the HTML elements represented by items
(Node object references) of the HTMLCollection object referenced by
'children'.
PointedEars