Authors: Jacob Holderman & Jonas Holderman
of Triminds, Inc.
Step 1: Design a form look include a text box,
check box, and buttons.
<form action="" method=""
name="">
<input type="text" size="10"
name="">
<input type="checkbox"
name="" value="ON">
<input type="submit" value="Add">
<input type="reset" value="Clear">
</form> |
Step 2: Give the form and the input types a name.
*Very Important*
<form action="" method=""
name="formname">
<input type="text" size="10"
name="textname">
<input type="checkbox"
name="checkboxname"
value="ON">
<input type="submit" value="Add">
<input type="reset" value="Clear">
</form> |
Step 3: Add the onclick tag in the checkbox.
Make the value
"codename()". *Very Important*
<form action="" method=""
name="formname">
<input type="text" size="10"
name="textname">
<input type="checkbox" onclick="codename()"
name="checkboxname" value="ON">
<input type="submit" value="Add">
<input type="reset" value="Clear">
</form> |
Step 4: Now we want to make the text box disabled.
Add the disabled in the
text box.
<form action="" method=""
name="formname">
<input type="text" disabled
size="10"
name="textname">
<input type="checkbox"
onclick="codename()"
name="checkboxname" value="ON">
<input type="submit" value="Add">
<input type="reset" value="Clear">
</form> |
Step 5: Now we need to enable it with the checkbox using a
small java script. Add the following code
above the form. The script is case sensitive meaning you can only use lowercase.
|
<SCRIPT LANGUAGE="JavaScript"><!--
function codename() {
if(document.formname.checkboxname.checked)
{
document.formname.textname.disabled=false;
}
else
{
document.formname.textname.disabled=true;
}
}
//-->
</SCRIPT>
<form action="" method=""
name="formname">
<input type="text" disabled size="10"
name="textname">
<input type="checkbox"
onclick="codename()"
name="checkboxname" value="ON">
<input type="submit" value="Add">
<input type="reset" value="Clear">
</form>
|
This code is also useful when you don't want to
send empty
values. It allows you have a option.
Example: using form method GET (http://www.host.com/index.asp?formname=&checkboxname=ON)
without code
Example: using form method GET
(http://www.host.com/index.asp?)
with |
Back to the HTML Goodies Home Page
IE 7
Firefox 2.0
