Export (0) Print
Expand All

Event Handling in HTML Elements Sample

Visual Studio .NET 2003

To make HTML elements interact with the user, you can add Event Handlers that run on events such as onClick or onChange.

For example, suppose that you add a <FORM> to the <BODY> of your Web page that includes a list box named eSelPage:

<SELECT ID="eSelPage" NAME="eSelPage" size=3> 

In the VALUE attribute of each <OPTION> of the eSelPage list box, store the URL (Uniform Resource Locator) for another Web page:

<OPTION VALUE="http://msdn.microsoft.com/workshop/">MSDN Online Web Workshop

A Go button placed within the same <FORM> as the eSelPage list box displays the selected page:

<INPUT ID="bGo" type="button" VALUE="Go" NAME="bGo" onClick="goThere(this.form.eSelPage)"> 

When the user chooses the Go button, the bGo <INPUT> passes the entire eSelPage <SELECT> element to a function named goThere(). Add this function to a <SCRIPT> used by the page:

function goThere(eSelPage) {
   var sURL = eSelPage.options[eSelPage.selectedIndex].value;
   var newWin = window.open(sURL,'newWin','resizable,scrollbars,menubar,toolbar,location,status');
   newWin.focus();
}

This goThere() function retrieves the URL stored in the VALUE attribute of the <OPTION> currently selected in the eSelPage list box passed to it, displays the Web page called in a new Web browser window, and makes that new window the active one.

Sample "GoThere.htm" Page

Here is the complete HTML markup for the "GoThere.htm" page described above. Note the following features in the markup of this page:

  • The <HEAD> portion of this sample page includes a <meta> statement that set its targetSchema property. This property determines the validation schema used while editing the page in HTML Designer. For more on this properties, see Setting the targetSchema Property of an HTML Document.
  • The pageLayout property of this document has been set to GridLayout (the <BODY> element has an MS_POSITIONING="GridLayout" attribute). When this page is edited in HTML Designer, you can drag the <SELECT> and <INPUT TYPE="button"> elements across the Design view editing surface to reposition them. For more on this property, see Setting the pageLayout Property of an HTML Document.
  • Another <meta> statement sets the defaultClientScript property of this page, and the <SCRIPT> is defined by the attribute id=clientEventHandlersJS as the default location for event handlers added to this page. For more on this property, see Setting the defaultClientScript Property of an HTML Document.
  • The goThere() function has some added exception handling: it now displays messages if no <OPTION> is selected when the user clicks GO (to test this, remove the SELECTED attribute from the first <OPTION>), or if the URL stored in the VALUE attribute of an OPTION is missing or miswritten. For more on creating event handlers, see Creating Scripts and Editing Event Handlers in HTML Designer and Client Script in Web Forms Pages.
  • Default CSS styles have been assigned to the <BODY>, <H1>, <SELECT>, and <INPUT type="button"> elements. For more on applying CSS styles to HTML elements in HTML Designer, see Style Builder Dialog Box.

HTML Markup for "GoThere.htm"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>GoThere.htm</TITLE>
<meta http-equiv=content-type content=text/html; charset=iso-8859-1>
<meta name=keywords content="web design" >
<meta content=http://schemas.microsoft.com/intellisense/ie5 name=vs_targetSchema>
<meta content=JavaScript name=vs_defaultClientScript>
<SCRIPT id="clientEventHandlersJS" language="javascript" type="text/javascript" > 
function goThere(eSelPage) {
   var iSel = eSelPage.selectedIndex;
   if (iSel == -1) {
      alert("Please select a page, then click GO.");
      return
   }
   var sURL = eSelPage.options[iSel].value;
   if (sURL.substr(0,7) != "http://" || sURL.length < 12 ) {
      alert("Invalid URL. Edit the VALUE of this option.");
   } else {
      sURL = eSelPage.options[iSel].value;
      var newWin = window.open(sURL,'newWin','resizable,scrollbars,menubar,toolbar,location,status');
   newWin.focus();
   }
}
</SCRIPT>
<STYLE TYPE="text/css">
BODY {background:#fbfbfb; font-family:Verdana,Arial,Helv,Helvetica,Geneva,sans-serif; font-size:9pt; }
H1 {font-family:Arial,Helv,Helvetica,Geneva,sans-serif; font-size:21pt; color:navy; padding:0pt 0pt 12pt 0pt}
SELECT {font-family:Courier New, Letter Gothic, Courier, monospace; font-size:10pt; font-weight:bold; width:180pt; color:darkred; background-color:lightyellow; }
INPUT.button {font-family:Verdana,Arial,Helv,Helvetica,Geneva,sans-serif; font-size:13pt; font-weight:bold; width:38pt; color:darkred; background-color:lightyellow; }
</STYLE>
</HEAD>
<BODY MS_POSITIONING="GridLayout">
<TABLE width="468pt" border=0 cellspacing=0 cellpadding=0><tr>
<td align="center"><H1>goThere() Function</H1>
<FORM NAME="fGo" ID="fGo" TARGET="_blank">
<TABLE border=0 cellspacing="2pt" cellpadding="1pt"><tr valign="top">
<td><SELECT ID="eSelPage" NAME="eSelPage" size=3>
<OPTION VALUE="http://msdn.microsoft.com/workshop/index/default.asp" SELECTED>MSDN Web Workshop Index</OPTION> 
<OPTION VALUE="http://msdn.microsoft.com/vstudio/">Visual Studio Home 
<OPTION VALUE="http://www.microsoft.com/">Microsoft Home 
</SELECT></td>
<td><TABLE border=1 cellspacing=0 cellpadding=0><tr>
<td><INPUT ID="bGo" TYPE="button" VALUE="GO" NAME="bGo" CLASS="button" onClick="goThere(this.form.eSelPage)" STYLE="width:38pt; height:38pt; font-size:13pt;"></td></tr></TABLE></td>
</tr></TABLE></FORM></td></tr></TABLE>
</BODY>
</HTML>

For Further Information

For guidance on creating scripts and writing event handler functions, see

Scripting and HTML
HOWTO: Use Client-Side VBScript with Remote Scripting
Server Event Handling in Web Forms
Code for Web Applications a
Creating Event Handlers in Web Forms Pages
Creating an Event Handler at Run Time in Web Forms Pages
Handling User Control Events [.NET Framework]
Writing Event Handlers [Visual Basic]
Implementing_DHTML_Behaviors_in_Script_Using_HTML_Components
Handling HTML Element Events

For help in understanding how, when, and where scripts run, see

Understanding the Event Model
Web Forms Code Model
Client and Server Scripting in Web Pages
Client Script in Web Forms Pages
ASP.NET Server Control Event Model
Using ADO with Scripting Languages
Blurring the Lines Between the Client and Server with Remote Scripting
Marking Business Objects as Safe for Scripting
Microsoft Windows Script Technologies

For reference information on elements, properties, events, and functions, see

HTML Tab, Toolbox
DHTML References
SCRIPT Element | script Object
DHTML Events
CSS Attributes Reference
JScript Language Reference
VBScript Language Reference

See Also

Options that Affect Existing HTML, CSS, or XML Markup | Document Outline Window | Navigating in the Document Outline Window | Browsing Code and Components | Outlining and Hiding Code

Show:
© 2015 Microsoft