Printer-friendly page
Screen-friendly pageonChange Event Example
onChange: Move to new web page from list (Inccessible)
onChangeevent is used to move to a new web page.- On most browser the use of the up and down arrow keys triggers the
onChangeevent and moves the user to a new page.
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>
<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
}
// 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)
- A separate button using the
onClickevent is used to move to the new web page.
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>
<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
}
// 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
}