The Java Script to Disable an Input Field
- To avoid ambiguous data -- for example, a record marking a person as "single" as a martial status but with an associated spouse name -- many form designers suppress form elements that contradict form fields already selected. For example, a local government office may collect information about taxpayers.
Without any form elements disabled, the standard HTML form looks like this:
<form>
First Name: <input type=text width="30" name="txPayerFirstName"> <br>
Last Name:<input type=text width="30" name="txPayerLastName"><br>
Married: <input type="checkbox" name="marriedOption"><br>
Spouse's First Name: <input type=text width="30" name="spouseFirstName"> <br>
Spouse's Last Name:<input type=text width="30" name="spouseLastName"><br>
</form> - Each input element has a disabled property that defaults to false. To disable the element you simply need to set it to true. You can do this dynamically, by setting it to the "checked" property of the married check box. Since, in this case, the married check box will be unchecked by default, the text boxes for spouse name should also be disabled by default. The first step, then, is to add the appropriate parameter to each of the spouse name text boxes. Then, set up an "onclick" event on the married check box element that will enable or disable the text boxes based on the state of the check box. The form will now look like this:
<form>
First Name: <input type=text width="30" name="txPayerFirstName"> <br>
Last Name:<input type=text width="30" name="txPayerLastName"><br>
Married: <input type="checkbox" name="marriedOption" onclick="this.form.spouseFirstName.disabled = !this.checked; this.form.spouseLastName.disabled = !this.checked;"><br>
Spouse's First Name: <input type=text width="30" name="spouseFirstName" disabled="true"> <br>
Spouse's Last Name:<input type=text width="30" name="spouseLastName" disabled="true"><br>
</form>
Now each time the user clicks the married checkbox, the form will evaluate whether to disable the spouse name textboxes. - Another approach is to simply hide the elements until they are needed, thereby disabling them. By hiding elements you can create a cleaner look to the page and draw attention to critical sections as the user completes his data. While hiding elements is a little more difficult than disabling elements, the results are often worth the extra effort.
- First, place the spouse name inputs within a <div> with an id of "spouseFields" so you can easily show or hide them together. Setting visibility is a little more complicated than setting the disabled property since the property for visibility -- actually called "display" -- is contained within the style property and has three possible states. For more complex logic like this, it makes sense to use a function.
Your can place your function in the <script> tags within the <head> tags of your HTML document. After changing the "onclick" event in the "marriedOption" checkbox to call the new function, the whole page will look like this:
<html>
<head>
<script>
function showHideSpouseFields(marriedIsChecked)
{
spouseFieldsDiv = document.getElementById("spouseFields")
if(marriedIsChecked)
{
spouseFieldsDiv.style.display = "block"
}
else
{
spouseFieldsDiv.style.display = "none"
}
}
</script>
</head>
<form>
First Name: <input type=text width="30" name="txPayerFirstName"> <br>
Last Name:<input type=text width="30" name="txPayerLastName"><br>
Married: <input type="checkbox" name="marriedOption" id="marriedOption" onclick="showHideSpouseFields(this.checked)"><br>
<div id="spouseFields" style="display:none">
Spouse's First Name: <input type=text width="30" name="spouseFirstName"> <br>
Spouse's Last Name:<input type=text width="30" name="spouseLastName"><br>
</div>
</form>
</html>
Now, only married people will see the fields for their spouse's name.
The Problem
JavaScript for Disabling Fields
An Alternative
JavaScript for Hiding Elements
Source...