Stefan Ernst

Enable and disable HTML form elements with Javascript by ID

HTML Form Elements made of sand

Here's a simple hint on how to dynamically activate/deactivate (or enable/disable, however you want to call it) HTML/XHTML form elements (input boxes, select lists, radio buttons, checkboxes).

This way you can, for example enable a certain form element after a specific Javascript/JS action or disable it if you do not want the user to be able to modify values in the respective part of your form.

It works by simply enabling/disabling the element through its HTML ID, which you'll have to specify.

For specifically disabling the element use:

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

And for enabling it use:

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

Keep in mind though that disabled Form Elements can give your form submission headaches as you might have troubles with the fact that in some cases disabled values don't get submitted!

There are 2 decent workarounds I can think of at the moment:
The first one simply would be re-enabling the elements right before the form submission - this might not work in every case though.
The second solution, which I am mostly using for the cases where I need to deactivate form fields: Simply hide the form fields instead of disabling them and show the value/text of the field/element as simple text.

That's it, enjoy.

Comments

Stefan: I am a complete

Submitted by K Crowley on 18. November 2009 - 1:18.

Stefan:

I am a complete newbie to javascripting. I am looking for help in writing code for a form. I have two radio buttons and I want to select one and gray out the other. I understand the code above, but don't understand how to put it into a working script. Can you help?

function Disab(val) {
frm=document.forms[0]

if(val=="t_bone")
{frm.ny_strip.disabled=true;frm.t_bone.disabled=false}
else {frm.t_bone.disabled=false;ny_strip.disabled=true}
}

T_Bone

NY_Strip

thanks,

K. Crowley

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
Are you human?
                                                                       
                                                                       
                      hhhhhhh                   888888888      lllllll 
                      h:::::h                 88:::::::::88    l:::::l 
                      h:::::h               88:::::::::::::88  l:::::l 
                      h:::::h              8::::::88888::::::8 l:::::l 
     eeeeeeeeeeee      h::::h hhhhh        8:::::8     8:::::8  l::::l 
   ee::::::::::::ee    h::::hh:::::hhh     8:::::8     8:::::8  l::::l 
  e::::::eeeee:::::ee  h::::::::::::::hh    8:::::88888:::::8   l::::l 
 e::::::e     e:::::e  h:::::::hhh::::::h    8:::::::::::::8    l::::l 
 e:::::::eeeee::::::e  h::::::h   h::::::h  8:::::88888:::::8   l::::l 
 e:::::::::::::::::e   h:::::h     h:::::h 8:::::8     8:::::8  l::::l 
 e::::::eeeeeeeeeee    h:::::h     h:::::h 8:::::8     8:::::8  l::::l 
 e:::::::e             h:::::h     h:::::h 8:::::8     8:::::8  l::::l 
 e::::::::e            h:::::h     h:::::h 8::::::88888::::::8 l::::::l
  e::::::::eeeeeeee    h:::::h     h:::::h  88:::::::::::::88  l::::::l
   ee:::::::::::::e    h:::::h     h:::::h    88:::::::::88    l::::::l
     eeeeeeeeeeeeee    hhhhhhh     hhhhhhh      888888888      llllllll
Enter the code depicted in ASCII art style.