StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You could do <em>inline</em> Javascript using <code>onchange</code> in the <code>select</code> element ... but inline JS is a bad habit, and should be avoided. Markup, i.e. (X)HTML, should be minimal and semantic, without any inline CSS or Javascript. It's good to separate your markup (HTML) from your layout (CSS) and your behaviour (Javascript) as much as you can.</p> <p>Keep your Javascript within the document <code>head</code>, or, even better, as an external script called in the <code>head</code>. This has advantages both in keeping your markup clean and minimal, and centralising and externalising your Javascript, which promotes code reuse and ease of maintenance.</p> <p>A Javascript framework like jQuery will make things much simpler and more robust, too, if you're not experienced with Javascript.</p> <p>Also, be aware that this approach (onchange on a select) is a poor one for accessibility (despite the fact that you see it everywhere on the web). For instance, many keyboard-only users (and that includes a whole lot of mobiles) are faced with the horrible situation where they choose a different option by moving up/down the list one option at a time... so your Javascript is kicked off over and over again, once for each option between the initial option and the newly desired one. Ugly - and if you're actually submitting the html form with the onchange JS, potentially a complete showstopper for those users. </p> <p>Regardless, you really should have have a separate submit button (for users without Javascript, search bots etc) anyway; there might be some value in onchange JS triggering some Ajax, but don't rely on it to be the only way a user can submit the selection.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload