Here's something I created a while ago that may help.

This is a checkbox input control on the form:

<input name="hsbox" type="checkbox" 
          onClick="if (this.checked){show_div('hs'); enabctrl('hs');} 
          else {hide_div('hs'); disabctrl('hs');};" value="0">

These are the div and input control affected by the onclick event - in
their original states before the event fires:

<div id="hs_req1" style="font-size:10px; font-variant:small-caps;
font-weight:bold; 
           color:#FF0000; visibility:hidden;
position:relative">(required)</div>

<input disabled="disabled" name="hs_protnum" type="text" size="15" 
          maxlength="15" value="">

These are the javascript functions called on the event - there are
multiple controls on this form I'm only sending the relevant ones:

function enabctrl(ctrl) {
        if (ctrl == 'hs')
        {
        document.pansubmit.hsbox.value=1;
        document.pansubmit.hs_protnum.disabled=false;
        document.pansubmit.hs_appdate.disabled=false;
        document.pansubmit.hs_appdate.disabled=false;
        document.pansubmit.hs_apppend.disabled=false;
        document.pansubmit.hs_appdef.disabled=false;
        }
}

function disabctrl(ctrl) {
        if (ctrl == 'hs')
        {
        document.pansubmit.hsbox.value=0;       
        document.pansubmit.hs_protnum.disabled=true;
        document.pansubmit.hs_protnum.value='';
        document.pansubmit.hs_appdate.disabled=true;
        document.pansubmit.hs_appdate.value='Click to select';
        document.pansubmit.hs_apppend.disabled=true;
        document.pansubmit.hs_apppend.value=0;  
        document.pansubmit.hs_apppend.checked=false;
        document.pansubmit.hs_appdef.disabled=true;
        document.pansubmit.hs_appdef.checked=false;     
        document.pansubmit.hs_appdef.value=0;           
        }

function show_div(grp) {
        if (grp == 'hs')
        {
                document.getElementById("hs_req1").style.visibility =
"visible";
                document.getElementById("hs_req2").style.visibility =
"visible";
        }       
}

function hide_div(grp) {
        if (grp == 'hs')
        {
                document.getElementById("hs_req1").style.visibility =
"hidden";
                document.getElementById("hs_req2").style.visibility =
"hidden";
        }       
}

Hope this helps.

Brent Kitchens
Office of Research - IT
Emory University

        
}-----Original Message-----
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Peyton Todd
Sent: Thursday, January 10, 2008 5:18 PM
To: discussion@acfug.org
Subject: [ACFUG Discuss] Building a Disabled vs. Enabled Save button

Okay, here's the problem I mentioned which seems to represent a
shortcoming in the DOM model. Surely I'm missing something, right?
Surely what I want to do is so common that the DOM designers allowed for
it, didn't they?

Here it is:

I have built a Save button which starts off in a disabled state, then
gets enabled as soon as the user changes anything in the form. As it
turns out, there's a problem with using 'onchange' since it is not
recognized by the DOM until the changed <input> item loses focus, and
the user may desire to press the Save button immediately after making
the change, which he cannot do since it will remain disabled until he
moves the cursor off the <input> item where he made the change. To solve
that problem, I am using 'onkeypress', which lets me enable the Save
button right away.

That actually doesn't work for a <select>, nor do we want it to, since
if the user presses 'N', for example, when the value of the <select> is
already 'N', we don't want that to be treated as a change. For that
situation, it turns out that 'onchange' is the way to go, since indeed
the change in this case is recognized by the DOM right away, without
waiting for a change in focus.

But now for the problem: onkeypress doesn't work for Backspace, and
onchange doesn't either. The DOM evidently does not consider Backspace
to be a keypress. It also does not regard Tab as a keypress, which is
indeed how we want Tab to behave, since nothing changes when the user
merely tabs from one <input> field to another. Sometimes that might be
what we want for Backspace, too, I don't know. But note that Backspace
is destructive of whatever character is to the left of the cursor when
Backspace is pressed, and that's a change. In fact, IN SOME CASES, IT IS
THE REMOVAL OF A CHARACTER - AND ONLY THAT - which contsitutes the
change the user is making. But this key press will not fire the
onkeypress event, so it will not let me enable the Save button when it's
the only change which occurs. Ouch!

I haven't tried them all, but the set of events available for <input>
tags does not look promising. None appears to have a definition which
would solve this problem.

What to do?

Thanks for your advice,
Peyton



-------------------------------------------------------------
Annual Sponsor FigLeaf Software - http://www.figleaf.com

To unsubscribe from this list, manage your profile @ 
http://www.acfug.org?fa=login.edituserform

For more info, see http://www.acfug.org/mailinglists
Archive @ http://www.mail-archive.com/discussion%40acfug.org/
List hosted by http://www.fusionlink.com
-------------------------------------------------------------





-------------------------------------------------------------
Annual Sponsor FigLeaf Software - http://www.figleaf.com

To unsubscribe from this list, manage your profile @
http://www.acfug.org?fa=login.edituserform

For more info, see http://www.acfug.org/mailinglists
Archive @ http://www.mail-archive.com/discussion%40acfug.org/
List hosted by http://www.fusionlink.com
-------------------------------------------------------------



Reply via email to