SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: enable text box

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    enable text box

    Hi

    I have a dropdown list and a text box which is disabled. Once I select one of the option ("add new"), it will enable the text box.

    How can I do that?Thanks

  2. #2
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try something like this (untested)
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Test</title>
    <script type="text/javascript">
    function checkText(val) {
    	document.getElementById("textBox").disabled = (val == "new") ?false:true;
    }
    </script>
    </head>
    <body>
    <form>
    <select name="selectBox" onchange="checkText(this.value);">
    <option>Select an option</option>
    <option value="new">Add New</option>
    <option value="1">Different Value</option>
    </select><br>
    <input type="text" name="textBox" id="textBox" disabled="disabled">
    </form>
    </body>
    </html>
    Jon

  3. #3
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That should work, though for a real page I would fix the HTML errors (I know it's a "quick and dirty" demo) and not use inline events.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  4. #4
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    That should work, though for a real page I would fix the HTML errors (I know it's a "quick and dirty" demo) and not use inline events.
    Agreed. I was trying to demonstrate how to "enable/disable" the textbox rather than show good markup.

    Strictly speaking, the textbox should initially be enabled and then disabled programmatically with javascript for progressive enhancement rather than being permanently disabled. (what if javascript is turned off?)

    The same goes for the onchange event that should also be added programmatically. This can be accomplished any number of ways, the easiest being <insert library name here>.

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jtrelfa View Post
    Strictly speaking, the textbox should initially be enabled and then disabled programmatically with javascript for progressive enhancement rather than being permanently disabled. (what if javascript is turned off?)
    Agreed.

    Quote Originally Posted by jtrelfa View Post
    The same goes for the onchange event that should also be added programmatically. This can be accomplished any number of ways, the easiest being <insert library name here>.
    I recommend Dean Edward's event manipulation functions.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •