Randell D. wrote:
(snip)
Thanks for the above - its a bit tricky for me and I'd have
difficulty supporting it - I gather you're using a mix of javascript and CSS
which is an interesting approach. I'm going to have to study it a little
though...
No CSS at all, just the HTML "disabled" attribute. Read-only fields,
especially ones that toggle back and forth, can be very confusing for
users. Disablement, familiar by now, at least supplies some visual
feedback . Some UAs shade the field as well (not IE, but this can be
patched in with an htc if desired). There are some usability questions
here which I'll pass on for now. The disabling is initially applied via
the behavioral layer (JS) so, JS-disabled users can still enter data.
Tidied this up a bit...just in case you're interested.
<html>
<head>
<title>untitled</title>
<script type="text/javascript">
function inSeq()
{
var els = document.forms[0].elements,
el,
i = 0,
blank = false;
while (el = els[i++])
{
blank = blank || (/^\s*$/.test(el.value));
if (el = els[i])
el.disabled =
blank && /\bdependent\b/.test(el.className);
}
}
function init()
{
var els = document.forms[0].elements,
el,
i = 0;
while (el = els[i++])
{
if (/\b(normal|dependent)\b/.test(el.className))
el.onkeyup = inSeq;
if (/\bdependent\b/.test(el.className))
el.onkeyup();
}
if ((el = els[0]).focus)
el.focus();
}
window.onload = init;
</script>
</head>
<body>
<form
onreset="return(confirm('Clear all entries?'))
&&setTimeout('init()',50)">
<h5 style="font:bold 9pt tahoma;">
Please enter measurements in order.
</h5>
<ul>
<li>
<input type="text" class="normal" name="box1" value="">___box 1
</li>
<li>
<input type="text" class="dependent" name="box2" value="" />___box 2
</li>
<li>
<input type="text" class="dependent" name="box3" value="" />___box 3
</li>
<li>
<input type="text" class="dependent" name="box4" value="" />___box 4
</li>
<li>
<input type="text" class="dependent" name="box5" value="" />___box 5
</li>
<li>
<input type="text" class="dependent" name="box6" value="" />___box 6
</li>
<li>
<input type="text" class="dependent" name="box7" value="" />___box 7
</li>
</ul>
<input type="reset" value="clear" />
</form>
</body>
</html>
