onChange JavaScript (JS) Example: HTML DOM Objects – Event – onChange JavaScript (JS) Example

Posted by asp.net videos on Saturday, February 20, 2010 · Leave a Comment 




Putting the Pieces of .NET Together in Under 60 Minutes

- 8 Part Video Series -

By Wade Harvey

IntroductionPutting the Pieces of .NET Together - Introduction
Videos 1-4
1. Servers
(3 minutes)
2. .NET
Framework
(10 minutes)
3. Security
(8 minutes)
4. Monitoring
Tools
(10 minutes)
Videos 5-8
5. Web Servers
(6 minutes)
6. SQL Server
(6 minutes)
7. Software
Develop Tools
(10 minutes)
8. Languages
(2 minutes)
Download PDF
Putting the Pieces of .NET Together - 48-page PDF


onChange JavaScript (JS) Example: HTML DOM Objects – Event – onChange JavaScript (JS) Example

Purpose: – Illustrates the for the .

View Other Attributes and Handlers for DOM Events

Prerequistes:

Syntax: Object.onChange="yourjavascriptcode()" – Allows you to know when text or selection for element has changed.

Restrictions: None

Notes:

  • You can build your own library of syntax examples by using same web site over and over and just add new files to it.

Instructions:

  1. Use Visual Web Developer 2008
  2. Create new web site;
    • Click File/New Web Site
    • Select ASP.NET Website Template
    • Select C-Sharp for language
    • name of Web Site could be JavaScript_Syntax.

    3. Folder

  3. Add New folder named "HTMLDOMObjects"
    • Right-click project name in solution explorer;
    • add new folder;
    • name of folder should be: HTMLDOMObjects
  4. Add New subfolder to "HTMLDOMObjects" folder named "DOMEvent"
    • Right-click folder named "HTMLDOMObjects" in solution explorer;
    • add new folder;
    • name of folder should be: DOMEvent
  5. Add New subfolder to "DOMEvent" subfolder named "EventHandlers"
    • Right-click subfolder named "DOMEvent" in solution explorer;
    • add new folder;
    • name of folder should be: EventHandlers
  6. Add HTML Page Named onChange to EventHandlers subfolder
    • Right-click EventHandlers subfolder;
    • add new item;
    • Select HTML Page
    • HTML Page name should be onChange
  7. Click on copy code in code below to copy code into HTML Page onChange.htm
  8. Right-click on HTML page onChange.htm and select view in browser
View Example In Browser

 HTML |  copy code |? 
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
  <head>
    <title>IdealProgrammer.com: onChange </title>
    <!-- 
    ***************************************************
    * This example is from http://idealprogrammer.com *
    ***************************************************
      //*****************************************************
       // DOM Objects
       //*****************************************************
 
 
       //*****************************************************
       //    ***    DOM Event - EventHandlers   ***
       //*****************************************************
 
       //*****************************************************
       // onChange
       //*****************************************************
 
       //    SYNTAX:
       //    object.onChange="yourjavascriptcode()"  Allows you to know when object
       //    text has been changed
 
       =================================================================
       An EXCELLENT tutorial on event basics can be found at:
       http://www.quirksmode.org/js/introevents.html
       =================================================================
 
       You can access the following properties thru the event handler:
 
        Available Properties
        altKey	     Retrieves a value that indicates the state of the ALT key.
        altLeft      Retrieves a value that indicates the state of the left ALT key.
        clientX	     Sets or retrieves the x-coordinate of the mouse pointer's position relative to the client area of the window, excluding window decorations and scroll bars.
        clientY	     Sets or retrieves the y-coordinate of the mouse pointer's position relative to the client area of the window, excluding window decorations and scroll bars.
        ctrlLeft	 Sets or retrieves the state of the left CTRL key.
        offsetX	     Sets or retrieves the x-coordinate of the mouse pointer's position relative to the object firing the event.
        offsetY	     Sets or retrieves the y-coordinate of the mouse pointer's position relative to the object firing the event.
        returnValue	 Sets or retrieves the return value from the event.
        screenX	     Sets or retrieves the x-coordinate of the mouse pointer's position relative to the user's screen.
        screenY	     Sets or retrieves the y-coordinate of the mouse pointer's position relative to the user's screen.
        shiftLeft	 Retrieves the state of the left SHIFT key.
        srcElement	 Sets or retrieves the object that fired the event.
        type	     Sets or retrieves the event name from the event object.
        x	         Sets or retrieves the x-coordinate (in pixels) of the mouse pointer's offset from the closest relatively positioned parent element of the element that fired the event.
        y	         Sets or retrieves the y-coordinate (in pixels) of the mouse pointer's offset from the closest relatively positioned parent element of the element that fired the event.
 
 
           The captureEvents() method captures all the events of the event type passed.
 
            When you have multiple events to capture, separate them with the pipe, |, character.
 
           Here are the types of event you can capture:
 
            Event.ABORT
            Event.BLUR
            Event.CHANGE
            Event.CLICK
            Event.DBLCLICK
            Event.DRAGDROP
            Event.ERROR
            Event.FOCUS
            Event.KEYDOWN
            Event.KEYPRESS
            Event.KEYUP
            Event.LOAD
            Event.MOUSEDOWN
            Event.MOUSEMOVE
            Event.MOUSEOUT
            Event.MOUSEOVER
            Event.MOUSEUP
            Event.MOVE
            Event.RESET
            Event.RESIZE
            Event.SELECT
            Event.SUBMIT
            Event.UNLOAD
 
 
    -->
    <script type="text/javascript">
 
 
        function writeAvailableProperties() {
            document.write(event.altkey + " - altKey	     Retrieves a value that indicates the state of the ALT key.<br />");
            document.write(event.clientX + " - clientX	     Sets or retrieves the x-coordinate of the mouse pointer's position relative to the client area of the window, excluding window decorations and scroll bars.<br /><div style='background-color:Yellow;border-color:black;border-style:solid;border-width:1px;'> Please use browser back button to return to previous page</div><br /><br />");
        }
        function doSomething(e) {
            if (!e) var e = window.event
            // e refers to the event
 
            document.write(e.clientY + " - clientY	     Sets or retrieves the y-coordinate of the mouse pointer's position relative to the client area of the window, excluding window decorations and scroll bars.<br /><br /><div style='background-color:Yellow;border-color:black;border-style:solid;border-width:1px;'> Please use browser back button to return to previous page</div><br /><br />");
        }
 
    </script>
 
 
   </head>
  <body>
  <h1>Change Text Fields and Select from DropDown to see onChange in Action</h1>
 
<input type="text" 
    name="txtState" 
    value="State" 
    onchange="alert(event.srcElement.name + '\n' + event.srcElement.type)" /><br />
<input type="text" 
    name="txtCountry" 
    value="Country" 
    onchange="writeAvailableProperties()" /><br />
<input type="text" id="idZip"
    name="txtZip" 
    value="Zip"      />
  <script type="text/javascript">
      idZip.onchange = doSomething;
      if (idZip.captureEvents) idZip.captureEvents(Event.CHANGE);
      </script>    
 
    <p>Select a different option in the drop-down list box to trigger the onchange event.<br />
	<select name="Groceries" id="idGroceries" >
	<option value="Fruit">Fruit</option>
	<option value="Meat">Meat</option>
	<option value="Vegatables">Vegatables</option>
	</select> </p>
	<script type="text/javascript">
	    // This is the "traditional" and recommended technique for registering an event
	    // handler because it allows you to separate structure from behavior; the
	    // "inline" method of registering an event within xhtml tags is not
	    // the recommended approach because it blurs structure and behavior.
	    // For complete explanation, please see the following excellent article:
	    // http://www.digital-web.com/articles/separating_behavior_and_structure_2/
	    //
	    // Note: Using getElementById so registering event will work in FireFox
	    //
	    var mySelect = document.getElementById("idGroceries");
	    mySelect.onchange = doSomething;
	    if (mySelect.captureEvents) mySelect.captureEvents(Event.CHANGE);
      </script>  
 
 
</body>
 
</html>
 
 
 
Related posts:
  1. onBlur JavaScript (JS) Example: HTML DOM Objects – Event – onBlur JavaScript JS Example onBlur JavaScript (JS) Example HTML DOM Objects Event...
  2. onunload JavaScript (JS) Example: HTML DOM Objects – Event – onunload JavaScript (JS) Example onunload JavaScript (JS) Example: HTML DOM Objects - Event -...
  3. onreset JavaScript (JS) Example: HTML DOM Objects – Event – onreset JavaScript (JS) Example onreset JavaScript (JS) Example: HTML DOM Objects - Event -...
  4. onsubmit JavaScript (JS) Example: HTML DOM Objects – Event – onsubmit JavaScript (JS) Example onsubmit JavaScript (JS) Example: HTML DOM Objects - Event -...
  5. onfocus JavaScript (JS) Example: HTML DOM Objects – Event – onfocus JavaScript (JS) Example onfocus JavaScript (JS) Example: HTML DOM Objects - Event -...
Related posts brought to you by Yet Another Related Posts Plugin.
Filed under Uncategorized · Tagged with , , , , 
Speak Your Mind
Tell us what you're thinking... 
and oh, if you want a pic to show with your comment, go get a gravatar!
 
 
 
 
  
This blog uses the cross-linker plugin developed by Web-Developers.Net