codetoad.com
  ASP Shopping CartForum & BBS
  - all for $20 from CodeToad Plus!
  
  Home || ASP | ASP.Net | C++/C# | DHTML | HTML | Java | Javascript | Perl | VB | XML || CodeToad Plus! || Forums || RAM 
Search Site:

Home » Javascript » Article

Javascript - Enable and Disable form elements

Article by:  Jeff Anderson  ( 1362 ) (3/6/2002)
Bookmark us now! Add to Favourites
Email a friend! Tell a friend
Summary: This is a relatively little known and under-used feature of javascript which can be very useful in guiding a user through a form. Using the disabled tag, you can switch on and off elements in a form.
Viewed: 2179925 times Rating (729 votes): 
 0 out of 5
  Rate this Article   Read Comments   Post Comments


This is a relatively little known and under-used feature of javascript which can be very useful in guiding a user through a form. Using the disabled tag, you can switch on and off elements in a form.

Here is a standard text field:



Now here it is again, disabled:



Try typing in the second box, and you'll see that you can't - it's been disabled. You can do the same any other elements in a form - checkboxes, selection boxes and the rest.

Disabling Form Elements - Common Uses

One common use of this is to only enable the element, once the appropriate field has been selected earlier in the form.

Now here's a practical example. The 'explain your choice' field only becomes enabled when I have selected the answer to Question 1. Before selecting a radio button, try typing in the text field - you can't!

Question 1
Answer a:
Answer b:

Explain your choice:



Disabling Form Elements - How it's done

To disable an element, put the phrase disabled="true" within the element tag.



Once you've set the disabled tag, you can enable it using something like the following code:


 
<script language="/javascript/index.html">

function enableField()
{
document.form1.address2.disabled=false;
}
 
</script>

<a href="javascript:enableField()">Click here to enable the element<a/>



With disabled set to false, the form element becomes useable.





Useful Links


CodeToad Experts

Can't find the answer?
Our Site experts are answering questions for free in the CodeToad forums
Rate this article:     Poor Excellent
View highlighted Comments
User Comments on ' Javascript - Enable and Disable form elements'
RELATED ARTICLES
Javascript - Enable and Disable form elements
by Jeff Anderson
This is a relatively little known and under-used feature of javascript which can be very useful in guiding a user through a form. Using the disabled tag, you can switch on and off elements in a form.
Check IsNumeric Function
by Jeff Anderson
A javascript validation function to check whether the details entered by a user are numeric.
Javascript Onload Event
by Jeff Anderson
Sometimes you need to perform an action immediatley after the page has loaded. That's when the onLoad Event Handler comes in handy
Form Validation Function
by Jeff Anderson
A javascript validation function that you can use to validate all types of forms.
Javascript Get Selected Text
by Jeff Anderson
A cross-browser script to get text selected by the user
JavaScript Field Is Empty Form Validation
by Jeff Anderson
This javascript function allows you to check whether a form field has been completed or not.
Check Email Validation Function
by Jeff Anderson
A javascript validation function to check whether the user has entered a valid email address in a form.
Javascript onUnload Event Handler
by Jeff Anderson
The onUnload Event Handler allows you to perform an action as the user leaves the page.
Multiple submit buttons on a single form
by Kiran Pai
This script shows you how to submit the contents of a form to different programs depending on which Submit button you press. Additionally it also shows how to call two different functions when you press the Submit button.
Simple date validation
by Chris Hogben
function that takes a date in three parts, day, month and year - returns true if it's a valid date.








Recent Forum Threads
•  Run a program both on windows and linux
•  VERO.SurfCAM.v2014
•  Schlumberger.Petrel.V2013.2
•  Petrel.V2013.2
•  Altair.HyperWorks.v12
•  VoluMill.v6.1
•  VoluMill.NEXION.6
•  VERO.SurfCAM.v2014
•  Schlumberger.Petrel.V2013.2


Recent Articles
ASP GetTempName
Decode and Encode UTF-8
ASP GetFile
ASP FolderExists
ASP FileExists
ASP OpenTextFile
ASP FilesystemObject
ASP CreateFolder
ASP CreateTextFile
Javascript Get Selected Text


© Copyright codetoad.com 2001-2015