Javascript Tutorial part 2

 Enabling and Disabling elements using Javascript

We will be using a javascript function  to enable and disable a textfield.

How it will work?

• The form will consist of two buttons; enable and disable button.
• On load, the Textfield and Disable button  is disabled/inactive; only enable button will  be active/enabled(see screenshot on left).
• Clicking the Enable button will  activate/enable  the Textfield and also activate/enable the Disable button; disabling the Enable button(see screenshot on Right)
• Clicking the Enable button will  activate/enable  the Textfield and also activate/enable the Disable button.(that is reset everything-see screen on left).

Code for the Form:

 <html>
 <head>
 <script type='text/javascript' src='external.js'></script>
 </head>
 <body onload='Disable()'>
 <form name='frm'>
 <div style='border:solid;1px;width:260px;height:230px;'>
 <br/><br/><br/>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <input type='text' name='txt-fld' value='You can disable me!' id='txtfld'/><br/><br/>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <input type='button' name='submit' value='Enable' id='btnenable' onclick='Enable()'/>
 &nbsp;&nbsp;&nbsp;
 <input type='button' name='submit' value='Disable'  id='btndisable' onclick='Disable()'/>
 </div>
 </form>
 </body>
 </html>

The Javascript function:


We will use an external one, external.js. It will contain 3 functions:
DisableEnable(),Enable(),Disable().


Function DisableEnable()

• This function will check if textfield is enabled or disabled. If Textfield is disabled; the Button Enable shall be active and Button Disabled shall be inactive and vice versa.

Complete code for DisableEnable() Function:

function DisableEnable()

{

if(document.getElementById('txtfld').disabled==true) //checks if textfield is disabled

{

document.getElementById('btnenable').disabled=false;

                          //enable Button with id  

btnenable

document.getElementById('btndisable').disabled=true;

                        //disable Button with id btndisable

}

else // if 

textfield is not disabled

{

document.getElementById('btnenable').disabled=true;

                          //disable Button with id  btnenable

document.getElementById('btndisable').disabled=false;

                          //enable Button with id  btnenable

}

}

Function Enable()

This function will activate the textfield and decide which button to enable or disable by calling the function DisableEnable(). 

Complete code for function Enable():

         function Enable()

{

 document.getElementById('txtfld').disabled=false; //Activate Textfield

 DisableEnable(); //call function to enable/disable appropriate buttons

}

Function Disable():

This function will deactivate the textfield and decide which button to enable or disable by calling the function DisableEnable().  

   function Disable()

{

document.getElementById('txtfld').disabled=true; //Deactivate Textfield

DisableEnable();//call function to enable/disable appropriate buttons

}

 External.js

      function DisableEnable()

{

if(document.getElementById('txtfld').disabled==true)

{

document.getElementById('btnenable').disabled=false;

document.getElementById('btndisable').disabled=true;

}

else

{

document.getElementById('btnenable').disabled=true;

document.getElementById('btndisable').disabled=false;

}

}//end of function

function Enable()

{

            document.getElementById('txtfld').disabled=false; 

            DisableEnable(); 

}//end of function

function Disable()

{

        document.getElementById('txtfld').disabled=true; 

        DisableEnable();

}//end of function








Note:  

• All elements should have a unique id,else there will be conflicts.
• Other ways of setting  an element to disabled=true/false exists.

• Example 1:
•  Within the html tags itself.
• <input type='text' name='txt-fld' value='You can disable me!' id='txtfld' disabled='true' />

• Example 2: 
• Instead of using getElementByid() to disable an element we could use:
•          document.Form.ID.disabled=false/true; 
• 
  
• For instance to disable the Enable Button which has id  btnenable,we would use:
•         document.frm.btnenable.disabled=true;