Enable form_textbox when input = M or R??

vknowles · July 18th, 2003, 08:44 AM

Maybe I can help further if you post the relevant parts of your page (HTML and script).

-Van
(Old dog learning new tricks...)

vickriz · July 24th, 2003, 02:46 AM

Quote:

quote:Originally posted by vknowles
Maybe I can help further if you post the relevant parts of your page (HTML and script).

ok here it is the whole code..

Code:

Javascript:
function myChange(pT)
{
    switch(pT.value.toUpperCase())
    {
        case 'M':
        case 'R':
            document.getElementById('SpouseFN').disabled=false;
            document.getElementById('SpouseMN').disabled=false;
            document.getElementById('SpouseLN').disabled=false;
            document.getElementById('SpouseNS').disabled=false;
            break;
        case 'S':
            document.getElementById('SpouseFN').disabled=true;
            document.getElementById('SpouseMN').disabled=true;
            document.getElementById('SpouseLN').disabled=true;
            document.getElementById('SpouseNS').disabled=true;
            break;
        default:
            alert('Your input '+ ccForm.ccCivilStatus.value + ' is incorrect!');
            document.ccForm.ccCivilStatus.focus();
        break;
    }
}

HTML:
<FORM name="ccForm" method="post"> 
<TABLE>
  <tr>
    <td><span>G</span>ender</td>
    <td> 
      <input type="text" name="ccGender" id="Gender" accesskey="G" tabindex="8" maxlength="1" size="8" value="MALE" onChange="displayMe(this);" onMouseOver="window.status='Input should be M for Male and F for Female'; return true;" onMouseOut="window.status=''">M/F</td>
  </tr>
  <tr>
    <td>Ci<span>v</span>il Status</td>
    <td>
      <input type="text" name="ccCivilStatus" id="CivilStatus" accesskey="V" tabindex="9" maxlength="1" size="12"onChange="myChange(this);" onMouseOver="window.status='S=Single, M=Married, W=Widow, R=Separated'; return true;" onMouseOut="window.status=''">
    </td>
  </tr>
</TABLE>
</form>

Mabuhay!!!

vknowles · July 24th, 2003, 08:26 AM

Try the following version of your script.
The focus() method in the onChange event doesn't do anything because during the event the focus has not changed. Your user changes the focus later, after the event has completed.
But with the setTimeout method, you are delaying the snippet of code long enough that the onChange event completes, then the onFocus event fires.
Because the timed-out code fires in its own context, you have to use an independent reference to the text box (getElementById...).
I like to use the parameter value (pT) where possible. When referencing an element, I like to use the ID attribute, not the NAME attribute, because NAME is not unique. When I use both on an element, I always make sure they are the same (ID=NAME). Yours are not (CivilStatus != ccCivilStatus).

function myChange(pT)
{
    switch(pT.value.toUpperCase())
    {
        case 'M':
        case 'R':
            document.getElementById('SpouseFN').disabled=false ;
            document.getElementById('SpouseMN').disabled=false ;
            document.getElementById('SpouseLN').disabled=false ;
            document.getElementById('SpouseNS').disabled=false ;
            break;
        case 'S':
            document.getElementById('SpouseFN').disabled=true;
            document.getElementById('SpouseMN').disabled=true;
            document.getElementById('SpouseLN').disabled=true;
            document.getElementById('SpouseNS').disabled=true;
            break;
        default:
            alert('Your input '+ pT.value + ' is incorrect!');
            setTimeout('document.getElementById(\''+pT.id+'\') .focus()',10);
        break;
    }
}

-Van
(Old dog learning new tricks...)