SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2000
    Location
    Norcross, GA
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    greying out (disabling) text boxes with javascript

    Say I have a form that asks for a name and favorite color. There is a third elemet that asks for favorite food, but it is disabled (greyed out). Pretty basic html so far.

    Now, add to the form a checkbox beside the name field. If a user clicks this checkbox the greyed out element becomes active.

    Before the checkbox is selected the form looks like this:

    Code:
    <form action=test.cgi method=post>
    
    Name? <input type=text name=name> <input type=checkbox name=addelement value=yes> List your favorite food?
    
    Color? <input type=text name=color>
    
    Food? <input type=text name=food disabled>
    
    <input type=submit value=submit>
    
    </form>

    If the checkbox is selected the form looks like this:

    Code:
    <form action=test.cgi method=post>
    
    Name? <input type=text name=name> <input type=checkbox name=addelement value=yes> List your favorite food?
    
    Color? <input type=text name=color>
    
    Food? <input type=text name=food>
    
    <input type=submit value=submit>
    
    </form>

    The user can select and unselect the checkbox and the food input text box will select/deselect with each subsequent click.

    I've done something vaguely similar - but only to change a value in an existing textbox, not to change an option for a text box.

    Can this be done?
    - Mike
    http://www.georgiaoffroad.com

  2. #2
    Dumb PHP codin' cat
    Join Date
    Aug 2000
    Location
    San Diego, CA
    Posts
    5,460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something like this.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    <head>
    	<title>Untitled</title>
    
    <script language="JavaScript1.2" type="text/javascript">
    <!--
    var state = 'disabled';
    
    	function change_state() {
    		if(state == 'disabled') {
    			document.forms[0].food.disabled = false;
    			state = 'abled';
    			}
    		else {
    			document.forms[0].food.disabled = true;
    			state = 'disabled';
    			}
    			
    		}	
    
    //-->
    </script>
    </head>
    
    <body>
    <form action=test.cgi method=post>
    
    Name? <input type=text name=name> 
    <br>
    <input type=checkbox name=addelement value=yes onClick="change_state(); "> List your favorite food?
    <br>
    Color? <input type=text name=color>
    <br>
    Food? <input type=text name=food disabled>
    <br>
    <input type=submit value=submit>
    
    </form>
    
    
    
    </body>
    </html>
    Please don't PM me with questions.
    Use the forums, that is what they are here for.

  3. #3
    PHP Developer W1LL's Avatar
    Join Date
    Apr 2001
    Location
    Leicester, UK
    Posts
    459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    .
    Last edited by W1LL; Jun 1, 2001 at 07:21.


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
  •