Degradable SELECT onChange

By  on  

Whenever I go to Google Analytics I notice a slight flicker in the dropdown list area. I see a button appear for the shortest amount of time and the poof! Gone. What that tells me is that Google is making their site function whether the user has JavaScript or not. The following is a quick explanation of how it works.

The XHTML

<iframe id="site-frame" src="http://<?php echo $_POST['site'] ? $_POST['site'] : 'scriptandstyle.com'; ?>" style="border:1px solid #ccc;float:right;width:700px;height:500px;"></iframe>

<form action="" method="post">
	<select name="site" id="site">
		<option value="">Select a Site</option>
		<option value="github.com/darkwing">GitHub</option>
		<option value="mootools.net">MooTools</option>
		<option value="scriptandstyle.com">Script & Style</option>
		<option value="twitter.com/davidwalshblog">Twitter</option>
	</select>
	<input type="submit" value="Go" class="button" id="submit-button" />
</form>

My example is a dropdown list that manipulates an iFrame. Note that we use a form tag and submit button so that the site functions well without JavaScript.

The JavaScript

//when the window has loaded...
window.onload = function() {
	//hide the button 
	document.getElementById('submit-button').style.display = 'none';
	//our event function
	var handler = function() {
		if(select.value) {
			document.getElementById('site-frame').src = 'http://' + select.value;
		}
	};
	//add the event listener
	var select = document.getElementById('site');
	if(select.addEventListener){
		select.addEventListener('change',handler,false);
	}
	else {
		select.attachEvent('onchange',handler,false);
	}
};

When the window loads, we hide the submit button and add the event listener. If the user doesn't have JavaScript, all of our JavaScript gets ignored. Simple.

This system is very easy to implement and well worth the effort to make your website more accessible.

Recent Features

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

  • By
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

Incredible Demos

  • By
    MooTools 1.2 Tooltips: Customize Your Tips

    I've never met a person that is "ehhhh" about XHTML/javascript tooltips; people seem to love them or hate them. I'm on the love side of things. Tooltips give you a bit more information about something than just the element itself (usually...

  • By
    Printing MooTools Accordion Items

    Sometimes we're presented with unforeseen problems when it comes to our JavaScript effects. In this case, I'm talking about printing jQuery and MooTools accordions. Each "closed" accordion content element has its height set to 0 which means it will be hidden when the...

Discussion

  1. Even though it is possible to do it this way, I would much rather just wrap the submit button in a noscript tag. Maybe it’s just me, but I think it’s a bit tacky when I see stuff show briefly while loading and then disappear. Are there any issues with using a noscript tag?

  2. Using the “onLoad” event is a bad idea; there’ll be a significant amount of time between the button being visible and it being removed; this flicker isn’t exactly good for the user experience. It’s better to remove it the button as soon as the element exists – you could do this by using one of the psuedo-domReady events present in many of today’s libraries.

  3. @James: My goal was to avoid using a JS lib. I suppose it would be possible to implement a lib-independent DOMREADY function.

  4. Hmmm, given more though, I could simply put the

  5. Might I ask why you are doing this:

    if(select.addEventListener){
    

    Don’t all browsers support it or what?

  6. @Adriaan, only browsers that comply with the W3C event model support addEventListener – IE uses attachEvent. btw, @David, IE doesn’t support event capturing in the same way as other browsers so the third argument ("false") can be removed from select.attachEvent('onchange',handler,false);

  7. why don’t you just move the script bellow the form, this way you are sure you can access the element and don’t have to wait for onLoad

  8. Stephen

    Am I missing something or why do you use getElementById() instead of $()?

  9. @Stephen: because this is framework independent javascript

  10. David, I just want to say that your blog rocks.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!