TamWiki » Quick Action On Select

(redirected from Main.QuickActionOnSelect)

On this page... (hide)

General Form
- Before changing the option:
- Result:
An Example
- Before:
- After

This is a quick and dirty way of getting your web page to respond to a change in value of a non-form-enclosed <select> tag. This is useful for causing changes to happen based on some specific set of values that you want to offer the user. First I will give the general form, then offer a specific example from some recent work I have done.

General Form

The concept here is that we use the onchange attribute of the <select> tag to trigger a little javascript to do something with the value of the <option> tag that has been selected.

<select name="myselect" id="myselect" onchange="dosomething(this.value)" size="1">
<option value="option1">option1</option>
<option value="option2">option2</option>
</select>
<script type="text/javascript" charset="utf-8">
/* <![CDATA[ */
function dosomething (argument) {
alert("Option " + argument + " selected");
}
/* ]]> */
</script>

raw code

Before changing the option:

Attach:before.png Δ

Result:

Attach:after.png Δ

An Example

Here's a specific example from some work I've done recently to enable fast theme switching based on applying a parameter to the current location's URL.

<?php
$themes = array();
if ($cssdir = opendir('css')) {
while ($file = readdir($cssdir)) {
if (preg_match('/^theme_(.*)\.css$/', $file, $matches)) {
$themes[] = $matches[1];
}
}
echo '<p>Select a theme:'.PHP_EOL;
echo '<select name="themeswitcher" id="themeswitcher" onchange="settheme(this.value)" size="1">'.PHP_EOL;
foreach ($themes as $themename) {
echo '<option value="'.$themename.'"'.($themename == $GLOBALS['theme']?' selected ':'').'>'.$themename.'</option>'.PHP_EOL;
}
echo '</select>'.PHP_EOL;
echo '</p>'.PHP_EOL;
?>
<script type="text/javascript" charset="utf-8">
/* <![CDATA[ */
function settheme (theme) {
window.location=location.href + '&theme=' + theme;
}
/* ]]> */
</script>
<?php
} else {
error_log("ERROR: Could not open css directory\n");
}
?>

raw code

In this example, I'm setting up a means for the user to choose a different theme than the one presented. The means to do this are by reloading the page with a query string parameter of theme=newtheme. The various themes are held in the css subdirectory of the application, and have the file naming specification of "theme_" + theme name + ".css". This makes the theme choices easy to pick out amongst the other possible css and other files in the directory.

The css directory is scanned, using the readdir function in php, which returns the files in the directory handle $cssdir one at a time. The file is run through preg_match to weed out the files we don't want, and when a matching file is found the theme name is extracted into the second element of the $matches array (subscript 1). This is appended to an array of theme names for use in setting the options below in the <select> block.

A little label is given to show the user what to do. In this case, I do not use the alternative of setting the first option in the switch block to be some sort of instruction, as I need to have the current theme name selected. After the label, the select block is started. Of note is the onchange attribute, which is set to the javascript function we're going to call whenever the select block changes:

onchange="settheme(this.value)"

raw code

will call the settheme function with the currently selected value of the switch block. this.value is a particularly handy way of passing on that currently selected value.

In the foreach loop, we have to check which option corresponds to the currently selected theme, so we can present the user with something to actually change. The currently selected theme is held in the php $GLOBALS array as key theme. The resulting HTML emitted looks like this:

<p>Select a theme:
<select name="themeswitcher" id="themeswitcher" onchange="settheme(this.value)" size="1">
<option value="dark" selected >dark</option>
<option value="purple">purple</option>
</select>
</p>
<script type="text/javascript" charset="utf-8">
/* <![CDATA[ */
function settheme (theme) {
window.location=location.href + '&theme=' + theme;
}
/* ]]> */
</script>