greying out (disabling) text boxes with javascript

**mstembri** · May 31, 2001 13:57

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?

**freddydoesphp** · May 31, 2001 17:31

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>

**W1LL** · Jun 1, 2001 08:18

.

User Tag List

Thread: greying out (disabling) text boxes with javascript

Thread Tools

Display

Hybrid View

greying out (disabling) text boxes with javascript

Bookmarks

Bookmarks

Posting Permissions