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

I'd love to see this working

Submitted by sanepete on 26. January 2012 - 18:07.

I'd love to see this working on IE.

hi...

Submitted by Anonymous on 25. November 2011 - 8:10.

hi...

Hi! It's working for me.

Submitted by John Ortiz on 17. November 2011 - 19:47.

Hi!

It's working for me. Thanks!

So long!

Want to know is there any way

Submitted by Akash on 30. April 2011 - 12:23.

Want to know is there any way that we can disable the entire form at a time or half of the form at a time without doing individual fields.

this is quite working man but

Submitted by Anonymous on 10. February 2011 - 11:34.

this is quite working man but i have three buttons on header and when i click on
button other 2 buttons data will be hidden ......
that thing i want(www.askinterview.com)
thanks.........

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?
                                                                                                   
                                                                                                   
                          444444444                                              333333333333333   
                         4::::::::4                                             3:::::::::::::::33 
                        4:::::::::4                                             3::::::33333::::::3
                       4::::44::::4                                             3333333     3:::::3
     ssssssssss       4::::4 4::::4   wwwwwww           wwwww           wwwwwww             3:::::3
   ss::::::::::s     4::::4  4::::4    w:::::w         w:::::w         w:::::w              3:::::3
 ss:::::::::::::s   4::::4   4::::4     w:::::w       w:::::::w       w:::::w       33333333:::::3 
 s::::::ssss:::::s 4::::444444::::444    w:::::w     w:::::::::w     w:::::w        3:::::::::::3  
  s:::::s  ssssss  4::::::::::::::::4     w:::::w   w:::::w:::::w   w:::::w         33333333:::::3 
    s::::::s       4444444444:::::444      w:::::w w:::::w w:::::w w:::::w                  3:::::3
       s::::::s              4::::4         w:::::w:::::w   w:::::w:::::w                   3:::::3
 ssssss   s:::::s            4::::4          w:::::::::w     w:::::::::w                    3:::::3
 s:::::ssss::::::s           4::::4           w:::::::w       w:::::::w         3333333     3:::::3
 s::::::::::::::s          44::::::44          w:::::w         w:::::w          3::::::33333::::::3
  s:::::::::::ss           4::::::::4           w:::w           w:::w           3:::::::::::::::33 
   sssssssssss             4444444444            www             www             333333333333333
Enter the code depicted in ASCII art style.