Funkdadu,
That's not correct XHTML 1.1, using attributes that are not correct for some elements, were deprecated and also unneccessary. Should not use the prolog line due to it throwing IE into quirks mode, the function showHide and variable trueFalse is an oxymoron and confusing and should be better named.
Instead of being unhelpful, here's the things to fix in the above:
Remove prolog line, <?xml ... ?> also it should be UTF-8 or UTF-16 when using XHTML, UTF-8 preferred because of browser support, this means updating the <meta http-equiv="Content-Type" charset to reflect it.
In <html> let them know what language the document it is by using the attribute, e.g. xml:lang="en"
The names for the function, showHide might be better reflecting what it is doing, disableInputs() and for the variable trueFalse possibly bValue, would have used bool but it could be a keyword, so I'd avoid it.
There's no name attribute for form, there's no align attributes for paragraph elements and also it should default to left anyways unless inheriting from a parent element. If needs be you should add to the style text-align: left;
And the last problem is the checkbox attribute checked, it should be checked="checked" or don't set it at all for it to default to being unchecked.
digi_duck,
You mention textareas but your code only reflects textboxes.
Here's a working example that shows a similar way of tackling the problem, it might seem a little confusing so I'll explain it, here's the code:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-NZ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Javascript, Disable multiple textboxes when checkbox is checked.</title>
<script type="text/javascript">
function disable(inputs,bValue)
{
for(var i = inputs.length, j = 0; i > j; i--)
{
inputs[i-1].disabled = bValue;
}
}
function disableNames(chkbox)
{
disable(document.getElementById('names').getElementsByTagName('input'),chkbox.checked ? true : false);
}
</script>
</head>
<body>
<form id="form1" action="" method="post">
<fieldset>
<legend>Name Details</legend>
<p>Do you want to fill in you name? <input id="noway" name="noway" type="checkbox" value="noway" onclick="disableNames(this);" /> <label for="noway">NO WAY!</label></p>
<div id="names">
<label for="fname">First:</label> <input id="fname" name="fname" type="text" /> <label for="mname">Middle:</label> <input id="mname" name="mname" type="text" /> <label for="lname">Last:</label> <input id="lname" name="lname" type="text" />
</div>
<p><input id="submit" name="submit" type="submit" value="Send Details" alt="Send Details" /></p>
</fieldset>
</form>
</body>
</html>
We'll look at the form first, it's pretty straight forward, the onclick action of noway (the checkbox) sends the element object of that checkbox to the function disableNames.
disableNames then calls the disable function passing all the inputs found inside the names divider (div) as an array of elements, it also sends the value of the checkbox checked as either a true or false (boolean) value.
We then loop through the elements and set them disabled based on the status of the checkbox, so if the checkbox is checked, the inputs will be disabled, if unchecked the inputs will be enabled.
You should also know that elements that are disabled, their values should not be passed when submitted so it should not matter if someone enters details in those textboxes and then disables the inputs, but if you are concerned about this, you can just clear the value of those inputs just by adding it to the disable function.
What might make this confusing is how I've written the script, usually trying to do less steps avoiding variable usage for one off things, doing the for loop in reverse which is only a performance/optimisation thing as well as storing the length in a variable again it's a performance/optimisation thing, just with lookup times.
Cheers,
MC
