...

View Full Version : enable disabled text fields?



nikko50
10-23-2005, 07:14 AM
Hello all. How can I get the below script to work with rows. Vic gave me this script and it works great if you use the span tags but I'm trying to get to get this to work when text areas are contained in table rows. Please help. If you're out there Vic please help.
Tracy:)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// by Vic Phillips http://www.vicsjavascripts.org.uk/

function Disable(obj,state){
clds=obj.parentNode.childNodes;
if (!obj.ary){
obj.ary=new Array();
for (i1=0;i1<clds.length;i1++){
if (clds[i1].tagName=='INPUT'||clds[i1].tagName=='SELECT'||clds[i1].tagName=='TEXTAREA'){
obj.ary[obj.ary.length]=clds[i1];
}
}
}
for (i=0;i<obj.ary.length;i++){
obj.ary[i].removeAttribute('disabled');
}
if (obj.checked==state){
for (i1=0;i1<obj.ary.length;i1++){
obj.ary[i1].setAttribute('disabled','disabled');
}
}
obj.removeAttribute('disabled');
}

//-->
</script>

</head>

<body>
<span >
<input type="checkbox" name="" disabled >
<input type="text" name="" disabled >
<select disabled ><option>Select</option></select>
<input type="checkbox" name="" onclick="Disable(this,false);" > Disable/Enable
</span>
<br>
<span >
<input type="checkbox" name="" disabled >
<input type="text" name="" disabled >
<select disabled ><option>Select</option></select>
<input type="checkbox" name="" onclick="Disable(this,false);" > Disable/Enable
</span>
<br>
<br>

<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<span > <tr>
<td width="50%"><input type="text" name="" disabled ></td>
<td width="25%"><select disabled ><option>Select</option></select>
</td>
<td width="25%"><input type="checkbox" name="" onclick="Disable(this,false);" > Disable/Enable
</td>
</tr></span>
<span><tr>
<td width="50%"><input type="text" name="" disabled ></td>
<td width="25%"><select disabled ><option>Select</option></select>
</td>
<td width="25%"><input type="checkbox" name="" onclick="Disable(this,false);" > Disable/Enable
</td>
</tr></span>
</table>
</center>
</div>

</body>

</html>

vwphillips
10-23-2005, 09:53 AM
this script has been updated and featured on

http://www.vicsjavascripts.org.uk/FormCompendium/FormCompendium.htm#f40


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// Disable and Enable Fields f40_Part1 (15-09-2005)
// by Vic Phillips http://www.vicsjavascripts.org.uk/

// Disable and Enable Form Elements from a CheckBox
// TextBoxes, Checkboxs, Radio Buttons, Select Lists & TextAreas
// Options to 'Disable' when 'checked' or 'Enable' when 'checked'
// As many and nested application as required on a page.

// Application Notes

// The elements to be controlled must be nested in an element

// For localised application
// the controlling checkbox may be nested in the same element
// In which case the controlling check box must include the onclick event call
// onclick="f40_Disable(null,this,true);"
// Only the last parameter of the call requires customising to 'true' or 'false'
// true = if the checkbox is checked the elements will be 'disabled';
// false = if the checkbox is checked the elements will be 'enabled';
// Example HTML Code
// <span >
// <input type="checkbox" name="" >
// <input type="text" name="" >
// <select ><option>Select</option></select>
// <input type="checkbox" name="" onclick="f40_Disable(null,this,true);" > Disable/Enable
// </span>

// For more global applications
// the controlling checkbox may be positioned anywhere
// In which case the controlling check box must include the onclick event call
// onclick="f40_Disable(null,this,true);"
// e.g. onclick="f40_Disable('*ID*',this,true);"
// where
// *ID* = the unique ID of the top level parent element
// The last parameter of the call requires customising to 'true' or 'false'
// true = if the checkbox is checked the elements will be 'disabled';
// false = if the checkbox is checked the elements will be 'enabled';
// Example HTML Code
// <form id="MyForm">
// <span >
// <input type="checkbox" name="" disabled="disabled" >
// <input type="text" name="" disabled="disabled" >
// <select disabled="disabled" ><option>Select</option></select>
// <input type="checkbox" name="" onclick="f40_Disable(null,this,false);" > Enabled (Local)
// </span>
// <br>
// <span >
// <input type="checkbox" name="" >
// <input type="text" name="" >
// <select ><option>Select</option></select>
// <input type="checkbox" name="" onclick="f40_Disable(null,this,true);" > Disable (Local)
// </span>
// <br>
// <input type="checkbox" name="" onclick="f40_Disable('MyForm',this,true);" > Disable (Global)
// </form>


// The functional code f40_Part1 (about 1.0K) is best as an external JavaScript

// All variable, function etc. names are prefixed with 'f40_' to minimise conflicts with other javascripts


// Functional Code - NO NEED to Change

function f40_Disable(f40_par,f40_obj,f40_state){
if (f40_par){f40_clds=f40_AllElements(document.getElementById(f40_par)); }
else { f40_clds=f40_AllElements(f40_obj.parentNode); }
if (!f40_obj.ary){
f40_obj.ary=new Array();
for (f40_0=0;f40_0<f40_clds.length;f40_0++){
if (f40_clds[f40_0].tagName=='INPUT'||f40_clds[f40_0].tagName=='SELECT'||f40_clds[f40_0].tagName=='TEXTAREA'){
f40_obj.ary[f40_obj.ary.length]=f40_clds[f40_0];
}
}
}
for (f40_1=0;f40_1<f40_obj.ary.length;f40_1++){
f40_obj.ary[f40_1].removeAttribute('disabled');
}
if (f40_obj.checked==f40_state){
for (f40_2=0;f40_2<f40_obj.ary.length;f40_2++){
f40_obj.ary[f40_2].setAttribute('disabled','disabled');
}
}
f40_obj.removeAttribute('disabled');
}

function f40_AllElements(f40_){
if (f40_.all){ return f40_.all; }
return f40_.getElementsByTagName('*');
}

//-->
</script>

</head>

<body>

<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<span > <tr id="Row0" >
<td width="50%"><input type="text" name="" disabled ></td>
<td width="25%"><select disabled ><option>Select</option></select>
</td>
<td width="25%"><input type="checkbox" name="" onclick="f40_Disable('Row0',this,true);" > Disable/Enable
</td>
</tr></span>
<span><tr id="Row1" >
<td width="50%"><input type="text" name="" disabled ></td>
<td width="25%"><select disabled ><option>Select</option></select>
</td>
<td width="25%"><input type="checkbox" name="" onclick="f40_Disable('Row1',this,true);" > Disable/Enable
</td>
</tr></span>
</table>
</center>
</div>

</body>

</html>

nikko50
10-23-2005, 02:11 PM
Hi Vic. Thanks so much. One last question. How can I have your script to not disable/enable the other checkboxes on my form. All other element are ok. On the line rows I have 3 checkboxes. Thanks again.
Tracy

vwphillips
10-23-2005, 02:27 PM
hmm

the script will not effect elements outside the element ID specified in field 0 of the call

If you have 3 inputs in that element it will effect all 3

there are other scripts on my site to meet other requirements



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum