/tutorials/forms/article.php/3479101/Triminds---Enable-and-Disable.htm Triminds - Enable and Disable

Triminds - Enable and Disable

By Vince Barnes

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


  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date