HOW TO: Change the State of an HTML Control Based on the Value of Another HTML Control (315604)


The information in this article applies to:

  • Microsoft Internet Explorer (Programming) 5.5
This article was previously published under Q315604

IN THIS TASK

SUMMARY

This step-by-step article demonstrates how to use object events to handle user interaction with Web page elements. In this article, you create a sample that handles the onPropertyChange event to take action when the user selects or clears a check box.

Dynamic Hypertext Markup Language (DHTML) provides an extensive object model for Hypertext Markup Language (HTML) and exposes all Web page elements as objects that can be scripted. You can manipulate DHTML objects to change style attributes or other properties for Web page elements with script. With DHTML, you can handle user interaction with Web page elements by means of object events.

back to the top

Requirements

The following list outlines the recommended hardware, software, network infrastructure, and service packs that are required:
  • Internet Explorer 5.5 or later
This article assumes that you are familiar with the following topics:
  • HTML
  • DHTML
back to the top

Detect the Property Change Event

  1. Open a text editor such as Notepad.
  2. Add the following code to the file:
    <HTML>
<BODY>
  <P/><INPUT Type="checkbox" CHECKED ID="Check1"/>
  <P/><INPUT Type="text" ID="Text1"/>
</BODY>
<SCRIPT Language="VBScript">
  Function Check1_OnPropertyChange()
    Text1.Disabled = Not(Check1.Checked)
  End Function
</SCRIPT>
</HTML>
  3. Save the file as C:\PropChangeDemo.htm.
back to the top

Verify That It Works

  1. Start Internet Explorer.
  2. Type C:\PropChangeDemo.htm in the Address bar. The HTML page contains a check box and a text box. Notice that the check box is selected and that the text box is empty.
  3. Type any text in the text box to verify that the text box is enabled.
  4. Click to clear the check box. This fires the onPropertyChange event. The event handler method in the HTML page disables the text box.
  5. Try to type additonal text in the text box. Notice that you cannot type any text because the text box is disabled.
  6. Click to select the check box. This fires another onPropertyChange event. The event handler method enables the text box.
  7. Type additional text in the text box. Notice you can type text now because the text box is enabled again.
back to the top

REFERENCES

For more information about developing Web-based solutions for Microsoft Internet Explorer, visit the following Microsoft Web sites:

http://msdn.microsoft.com/ie/

http://support.microsoft.com/iep

back to the top
Modification Type:MajorLast Reviewed:4/21/2006
Keywords:kbhowto kbHOWTOmaster KB315604 kbAudDeveloper
©2004 Microsoft Corporation. All rights reserved.