dcsimg

Triminds - Enable and Disable

By Vince Barnes

WEBINAR:
On-Demand

Building the Right Environment to Support AI, Machine Learning and Deep Learning


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


Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.

    By submitting your information, you agree that htmlgoodies.com may send you HTMLGOODIES offers via email, phone and text message, as well as email offers about other products and services that HTMLGOODIES believes may be of interest to you. HTMLGOODIES will process your information in accordance with the Quinstreet Privacy Policy.

  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date