...

View Full Version : Disable a fieldset?



AaronW
08-31-2004, 07:03 PM
So I have a form that lets me choose one of three templates to submit with. Each template is inside a <fieldset> tag. What I'd like to do is call disable ('fieldsetID') and have it disable the fieldset and all form fields inside it... I _thought_ disabling the fieldset would do that for me, but apparently not.

Sooo, how would one go about doing this? I have this so far, and I think it's a decent start:



disable = function ()
{
for (i = 0; i < disable.arguments.length; i++)
{
// Is it an array of objects?
if (typeof disable.arguments[i] == 'object')
{
for (j = 0; j < disable.arguments[i].length; j++)
{
disable.arguments[i][j].disabled = true;
}
}
// Just an id
else
document.getElementById (disable.arguments[i]).disabled = true;
}
}

disable (document.getElementById ('fieldset').childNodes);


But it doesn't work, and it certainly doesn't disable form elements only.

This is pretty much for Mozilla only, but an IE version would be cool if possible.

Thanks for any guidance,
Aaron

hemebond
08-31-2004, 10:40 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Disable form elements</title>
<script type="text/javascript">
function disable(element)
{
var input = document.getElementById(element).getElementsByTagName("input");
for(var i = 0; i < input.length; i++)
{
input[i].setAttribute("disabled","true");
}
}
</script>
</head>
<body>
<form>
<fieldset id="disable_me">
<caption>Fieldset</caption>
<div>
<label>Radio 1</label>
<input type="radio">
</div>
<div>
<label>Radio 2</label>
<input type="radio">
</div>
<div>
<label>Radio 3</label>
<input type="radio">
</div>
</fieldset>
</form>
</body>
<script type="text/javascript">
window.onload = disable("disable_me");
</script>
</html>

AaronW
09-01-2004, 02:40 AM
Hmm... There are textareas and selects too, but I'd imagine I could easily merge the arrays and loop through that. Guess using getElementByTagName's the best way, rather than checking type of _all_ the fieldsets' children.

Thanks.

jbot
09-08-2004, 03:37 PM
here's an alternative solution:


<html>
<head>
<title>Disabled Specified Fieldset</title>
</head>


<body>

<form>
<fieldset id="my-fieldset">
<legend>try this:</legend>

<label for="txtName">Name:</label><input name="txtName" id="txt1" type="text"/>
<br/>
<br/>
<label for="txtPassword">Password:</label><input name="txtPassword" id="txt2" type="password"/>

<br/>
<br/>
<label for="sltCareers">Careers:</label>
<select name="sltCareers" id="slt1">
<option>Web Developer</option>
<option>Web Designer</option>
<option>Project Manager</option>
<option>Systems Analyst</option>
<option>Information Architect</option>
</select>

<br/>
<br/>
<label for="chkSkill[0]">Javascript:</label><input name="chkSkill[0]" id="chk1" type="checkbox" value="Javascript"/>
<label for="chkSkill[1]">HTML:</label><input name="chkSkill[1]" id="chk2" type="checkbox" value="HTML"/>
<label for="chkSkill[2]">CSS:</label><input name="chkSkill[2]" id="chk3" type="checkbox" value="CSS"/>

<br/>
<br/>
<input name="btnReset" id="btn1" type="reset" value="clear"/>
</fieldset>

<input name="btnToggle" id="btn2" type="button" value="toggle fieldset" onclick="toggleFieldset('my-fieldset')"/>
</form>
</body>



<script type="text/javascript">

// parameter can either be a string representing the id of the fieldset or it can be object-reference to the fieldset itself
function toggleFieldset()
{
var oNode, aElms, i=0;

switch (typeof arguments[0])
{
case "string": oNode=document.getElementById(arguments[0]); break;
case "object": oNode=arguments[0]; break;
default: return;
}

if (aElms=oNode.childNodes)
{
while (oFld = aElms.item(i++))
{
oFld.disabled = (oFld.nodeType==1 && /^(input|select|button|textarea)$/i.test(oFld.nodeName) && oFld.disabled==false) ? true : false ;
}
}
}


// put in to ascertain that form fields are enabled
window.onload
{
for (var i=0; i < document.forms[0].elements.length; i++)
{
document.forms[0].elements[i].disabled=false;
}
}

</script>
</html>

hope that helps, too :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum