Protecting HTML Page Elements with JavaScript and CSS

December 4, 2002 Timothy Prickett Morgan

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&gt; 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

This Issue Sponsored By

Table of Contents

Content archive

Recent Posts

Subscribe

Pages

Search