Dropdown menus

Submitted by Arancaytar on Tue, 2007-06-05 08:21
Related Terms :

On occasion, a webmaster will want a select field on their web site to act like a drop-down menu: A way of opening a certain page simply by expanding the menu and clicking a certain option.

As an example:

The first is simply a part of a larger form, where you select an option and move on. The second one is meant to perform an action (page change) as soon as a selection is made.

But when using this normal setup, you still need to click a "Submit" button that will execute the form. Obviously, the less clicks are required, the better.

On the other hand, simply using the following will break the page for non-Javascript users:

<form action="showforum.php" method="get">
    <select name="forum" onchange="this.form.submit();">
      <option value="1" selected="selected">General</option>
      <option value="2">Tech Support</option>
      <option value="3">Miscellaneous</option>
    </select>
</form>

And if you violate the rules of accessibility, Tim Berners-Lee will turn in his grave.

...that is, he would if he were dead. But it's things like this that can send the W3C to an early grave. Anyway.

So what you want is to display a submit button to the user agents who do not execute scripts, but hide it from the users who do.

Solution? Watch and learn.

<head>
  <!-- if javascript works, hide the button -->
  <script type="text/javascript">
document.test.button1.style.display="none";
</script>
</head>
<body>
...
<form id="test" action="showforum.php">
  <select onchange="this.form.submit();">
    <option value="1" selected="selected">General</option>
    <option value="2">Tech Support</option>
    <option value="3">Miscellaneous</option>
  </select>
  <input type="submit" id="button1" name="" value="Go" />
</form>
...
</body>
  • 475 reads

Post new comment

The content of this field is kept private and will not be shown publicly.
  • You may use these tags: [abbr], [acronym], [b], [center], [code], [color], [cpp], [css], [define], [diff], [dtd], [font], [h3], [h4], [h5], [h6], [hr], [html], [i], [image], [img], [java], [javascript], [justify], [left], [list], [mysql], [node], [ol], [perl], [php], [python], [quote], [right], [s], [sh], [size], [sql], [sub], [sup], [table], [u], [ul], [url], [wikipedia], [xml]
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Easily link to terms in various wikis. For help, see <a href="/interwiki/3">interwiki</a>.
  • Textual smileys will be replaced with graphical ones.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Home
Syndicate content