Appendix JS_N_A4

 

Summary

Requirement: Changes of context are only initiated by user request or with user control.

Details: Do not use the change event of a SELECT element for navigation.

Examples

Incorrect code

Refer to the JS_N_A4 live demo for a working example.

<form action="#">
    <fieldset>
        <legend>
        	<strong>Weather and Warnings in your area</strong>
        </legend>
        <select id="demo">
            <option value="">Select your area:</option>
            <option value="nsw">New South Wales</option>
            <option value="vic">Victoria</option>
            <option value="qld">Queensland</option>
            <option value="wa">Western Australia</option>
            <option value="sa">South Australia</option>
            <option value="tas">Tasmania</option>
            <option value="act">Australian Capital Territory</option>
            <option value="nt">Northern Territory</option>
        </select>
    </fieldset>
</form>
var select = document.getElementById('demo');
 
select.addEventListener('change', function()
{
    var value = 
        select.options[select.options.selectedIndex].value;
 
    if(value !== '')
    {
        document.location.href = 
            'http://www.bom.gov.au/' + value + '/';
    }
}, false);