Theiling Online    Sitemap    Conlang Mailing List HQ    Attic   

Re: OT: TECH: JavaScript help

From:Mark J. Reed <markjreed@...>
Date:Tuesday, December 23, 2008, 1:04
On Mon, Dec 22, 2008 at 5:40 PM, Gary Shannon <fiziwig@...> wrote:

> My bad. Here's what I think he's after:

All this speculation!  Where'd Benct go?  Yoo-hoo!  BPJ!

I don't like the decoupling of the initialization in that version: if
you change the order in one place, you have to remember to change it
in the other.  This version does all the initialization via
Javascript, none in the HTML, so it can all be set together; the
disadvantage there is that it doesn't degrade gracefully if the user
doesn't have Javascript enabled.

<html>
 <head>
  <title>Test</title>
  <script language="javascript" type="text/javascript">
    (function () {
        // For each option, 'key' is the value that will be sent as the value
        // of the select list input if the form is submitted; 'label'
is the value
        // that will be displayed to the user within the select list; and
        // 'description' is what will show up in the separate text field.  The
        // order of the array below will be used for the select.

        var options = [
            { 'key': 'tee', 'label': 'Tee!',
                'description': 'long text for tee' },
            { 'key': 'tie', 'label': 'Tie!',
                'description': 'longer text for tie' },
            { 'key': 'toe', 'label': 'Toe!',
                'description': 'even longer text for toe' } ];

        // We can't initialize things until the page is loaded, so we set an
        // onload handler here to do it:
        window.onload = function() {
            // change 'myText' to the id of the text field input element
            var textInput = document.getElementById('myText');

            // change 'mySelect' to the id of the select list element
            var selectList = document.getElementById('mySelect');

            // build the select list from the options array above
            if (textInput && selectList) {
                for (var i=0; i<options.length; ++i) {
                    selectList.options[i] =
                        new Option(options[i].label, options[i].key);
                }
            }

            // have the text field updated when the selected item changes
            selectList.onchange = function() {
                textInput.value = options[this.selectedIndex].description; }

            // and call once to get the initial value
            selectList.onchange();

            // and prevent the user from typing in the text field
            textInput.onkeypress = function() { return false; }
        }
    })();
  </script>
 </head>
 <body>
  <form>
   <input id="myText" name="foo" />
   <select id="mySelect" name="bar"></select>
  </form>
 </body>
</html>

--
Mark J. Reed <markjreed@...>