|
|
|
|
|
       |
 |
|
|
 |
||
|
Protecting HTML Page Elements with JavaScript and CSS Hey, David: I have an HTML form with several optional elements. Is there a way to protect and unprotect text elements based on a checkbox? When the user checks an alternate shipping address box, I want to open up a set of shipping address fields. I tried to do this with JavaScript, but the value of the checkbox doesn't seem to change in Internet Explorer.
-- Loren You were on the right track checking the value for the checkbox; however checkboxes are a special case. The value attribute for checkboxes represents what the browser sends to the server when the checkbox is checked but doesn't indicate whether it is checked. There is a special checked property that indicates the checked state. I have provided a snippet of HTML code to get you started. In this example, I have also grayed out the shipping description fields to make it more obvious to the user that the fields are protected:
<html>
<head>
<title> Demonstrate Optional Form Elements</title>
<style>
.protected {
color: gray;
font-style: italic;}
.unprotected {
color: black;
font-style: normal;}
</style>
<script language="JavaScript" type="text/javascript">
function shipToChange() {
if (document.getElementById("shipTo").checked == true) {
document.getElementById("textShipTo").className="unprotected";
document.getElementById("shipToName").disabled=false;
document.getElementById("shipToName").focus();
document.getElementById("shipToLine1").disabled=false;
document.getElementById("shipToLine2").disabled=false;
document.getElementById("shipToCity").disabled=false;
document.getElementById("shipToState").disabled=false;
document.getElementById("shipToZip").disabled=false;
}
else {
document.getElementById("textShipTo").className="protected";
document.getElementById("shipToName").disabled=true;
document.getElementById("shipToLine1").disabled=true;
document.getElementById("shipToLine2").disabled=true;
document.getElementById("shipToCity").disabled=true;
document.getElementById("shipToState").disabled=true;
document.getElementById("shipToZip").disabled=true;
}
}
</script>
</head>
<body>
<form name="myForm" method="POST">
<table>
<tfoot>
<tr>
<td colspan="2">
<input type="submit" name="submit" value="Update">
<input type="submit" name="cancel" value="Cancel">
</td>
</tr>
</tfoot>
<tbody>
<tr valign="top">
<td>Billing Address:</td>
<td>
<input type="text" name="billToName" size="30"><br />
<input type="text" name="billToLine1" size="30"><br />
<input type="text" name="billToLine2" size="30"><br />
<input type="text" name="billToCity" size="20">
<input type="text" name="billToState" size="2">
<input type="text" name="billToZip" size="10">
</td>
</tr>
<tr align="top" valign="top">
<td>Specify Shipping Address:</td>
<td><input type="checkbox" name="shipTo" onchange="shipToChange();"></td>
</tr>
<tr valign="top">
<td id="textShipTo">Ship To:</td>
<td align="top">
<input type="text" name="shipToName" size="30"><br />
<input type="text" name="shipToLine1" size="30"><br />
<input type="text" name="shipToLine2" size="30"><br />
<input type="text" name="shipToCity" size="20">
<input type="text" name="shipToState" size="2">
<input type="text" name="shipToZip" size="10">
</td>
</tr>
</tbody>
</table>
</form>
<script language="JavaScript">
shipToChange();
</script>
</html>
To try this out on your computer, cut and paste the HTML source code listed above into an empty document and save it with a .html extension. When you are done, open it with your browser and try checking and unchecking the ship-to address. After toggling the checkbox, try typing an address in the ship-to address fields. The elements on this page that are referred to in the javascript all have a property name or ID set by the name attribute for <input> elements, and by the ID attribute of the <td> element. This choice let me use the document.getElementById() function to manipulate those elements attributes. When a change is detected in the shipTo element, the shipToChange() script is run to set the style attributes of the ship-to address elements. -- David
|
Editors
Contact the Editors |
|
Last Updated: 12/04/02 Copyright © 1996-2008 Guild Companies, Inc. All Rights Reserved. |
ADVANCED SYSTEMS CONCEPTS