onChange Event Example

onChange: Move to new web page from list (Inccessible)

HTML Example

HTML Source Code

<p>
  <label for="select1">Go to W3C Specifcation</label>
  <select id="select1" onchange="goToPage('select1')">
    <option value="http://www.w3.org/TR/HTML4">HTML 4 </option>
    <option value="http://www.w3.org/TR/CSS21">CSS 2.1 </option>
    <option value="http://www.w3.org/TR/WCAG10">Web Content Accessibility Guideines 1.0</option>
    <option value="http://www.w3.org/TR/WCAG20">Web Content Accessibility Guideines 2.0</option>
    <option value="http://www.w3.org/TR/UAAG10">User Agent Accessibility Guidelines 1.0</option>
    <option value="http://www.w3.org/TR/ATAG10">Authoring Tool Accessibility Guidelines 1.0</option>
  </select>
</p>

Javascript Source Code

// Javascript

// Javascript function to go to a new page defined by a SELECT element

function goToPage( id ) {

  var node = document.getElementById( id );
  
  // Check to see if valid node and if node is a SELECT form control
  
  if( node &&
    node.tagName == "SELECT" ) {

    // Go to web page defined by the VALUE attribute of the OPTION element

    window.location.href = node.options[node.selectedIndex].value;
    
  } // endif
  
  
}

onChange: New page using button (Accessible)

HTML Example

HTML Source Code

<p>
  <label for="select2">W3C Specifcations </label>
  <select id="select2" >
    <option value="http://www.w3.org/TR/HTML4">HTML 4 </option>
    <option value="http://www.w3.org/TR/CSS21">CSS 2.1 </option>
    <option value="http://www.w3.org/TR/WCAG10">Web Content Accessibility Guideines 1.0</option>
    <option value="http://www.w3.org/TR/WCAG20">Web Content Accessibility Guideines 2.0</option>
    <option value="http://www.w3.org/TR/UAAG10">User Agent Accessibility Guidelines 1.0</option>
    <option value="http://www.w3.org/TR/ATAG10">Authoring Tool Accessibility Guidelines 1.0</option>
  </select>
  <input type="button" value="Go To Specification" onclick="goToPage('select2')"/>
</p>

Javascript Source Code

// Javascript

// Javascript function to go to a new page defined by a SELECT element

function goToPage( id ) {

  var node = document.getElementById( id );
  
  // Check to see if valid node and if node is a SELECT form control
  
  if( node &&
    node.tagName == "SELECT" ) {

    // Go to web page defined by the VALUE attribute of the OPTION element

    window.location.href = node.options[node.selectedIndex].value;
    
  } // endif
  
  
}