Create a NoScript Compatible Select Form Element with an onChange Event

By  on  

I wouldn't say that I'm addicted to checking Google Analytics but I do check my statistics often. I guess hoping for a huge burst of traffic from some unknown source. Anyway, I have multiple sites set up within my account. The way to switch between sites is by choosing the site from a dropdown list. Once the dropdown list changes, the page automatically reloads with the requested site content.

While having the onChange event on a SELECT element is great and saves a click, it's important to note that the functionality breaks completely if the user doesn't have JavaScript enabled. In that case, it's important to show the submit button. Here's how to keep your bases covered.

The XHTML and JavaScript

<form name="accounts_form" id="accounts_form" method="get" action="<?php echo $_SERVER['REQUEST_URI']; ?>">
	<label for="color">Which account do you want to view?</label>    
	<select name="color" id="color" onchange="document.forms['accounts_form'].submit();">
		<option value="">Select</option>
		<option value="Savings Account 1">Savings Account 1</option>
		<option value="Savings Account 2">Savings Account 2</option>
		<option value="Savings Account 3">Savings Account 3</option>
		<option value="Checking Account 1">Checking Account 1</option>
		<option value="Checking Account 2">Checking Account 2    </option>
	</select>
	<br /><br />
	<input type="submit" value="Go!" id="sub" class="button" />
</form>

<script type="text/javascript">
	//Going to hide the button now using JavaScript since I know the onChange above will work.
	document.getElementById('sub').style.display = 'none';
</script>

Note that we show the button by default. We use JavaScript to hide the button -- since the JavaScript runs, we know that the SELECT's onChange event will work. Click here to see it in action!

Taking tips from Google can serve you well!

Recent Features

  • By
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

  • By
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

Incredible Demos

  • By
    Fixing sIFR Printing with CSS and MooTools

    While I'm not a huge sIFR advocate I can understand its allure. A customer recently asked us to implement sIFR on their website but I ran into a problem: the sIFR headings wouldn't print because they were Flash objects. Here's how to fix...

  • By
    9 Incredible CodePen Demos

    CodePen is a treasure trove of incredible demos harnessing the power of client side languages.   The client side is always limited by what browsers provide us but the creativity and cleverness of developers always pushes the boundaries of what we think the front end can do.  Thanks to CSS...

Discussion

  1. Good article – degradable scripting (or progressive enhancement might be apropos) is often talked about, but also often neglected. It’s good to see a practical example on how to support said JS-challenged users.

  2. For a complete form accessibility, I think it’s necessary insert the label for the select.

  3. @Carlo: Thank you! Updated.

  4. Also updates the example :-)

  5. Simply put the submit button inside noscript tags and it became visible only with javascript disabled. No need for other code.

  6. I think that it is worth mentioning that Google’s client-side code should be taken with a grain of salt. None of Google’s pages are even remotely close to standards compliant, including the code in your example. After all, who do they have to impress?

  7. @atom: I see your point, but I think in this case that functionality is more important than standards.

  8. @david there is no reason why you shouldn’t have both, in this example and most others, this can be achieved easily with minor modifications. I am just saying, if you use Google’s stuff, the likelihood that it is messy and needs some attention before reusing it is pretty high.

    There is almost no case where standards need to / or should be sacrificed for functionality.

  9. @atom: I can think of one: autocomplete=”off”.

    That one is completely indispensable when dealing with sensitive information in forms.

    – Not that it was relevant to any of this, I just thought I’d mention it :P

  10. The JavaScript should also be binding the onchange event.

  11. Jow

    I would just put the button in button here tags and thats it. I find this a little bit easier.

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