title: Having trouble getting <select> value to form field
body: <p>I have this page where there is a form with a drop-down list for options, then a dialog where you can change the details of the chosen option. I'm having trouble updating the dialog form (no default value) after having chosen an option from the drop-down list ( <code>select</code> tag).</p>
  
  <p>The code might look a bit strange, it's auto-generated by parenscript and cl-who (Common Lisp libraries).</p>
  
  <p>Code is as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function openFuns(form) {
      var frm = getElementById('editPass');
      return frm.date.value = form.passList.options[form.passList.selectedIndex].value;
  };
  function init() {
      _js72 = document.getElementById('editPassDialog');
      document.getElementById('getPass').onclick = function () {
          return _js72.showModal();
      };
      return document.getElementById('submitPass').onclick = function () {
          return _js72.close();
      };
  };
  window.onload = init;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  
  &lt;html lang='en'&gt;
    &lt;head&gt;
      &lt;meta charset='utf-8' /&gt;
      &lt;meta name='viewport' content='width=device-width, initial-scale=1' /&gt;
      &lt;title&gt;Ashtanga Yoga Osaka | Student Page
      &lt;/title&gt;
      &lt;link type='text/css' rel='stylesheet' href='/style.css' /&gt;
      &lt;script type='text/javascript'&gt;
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id='header'&gt;&lt;/div&gt;
      &lt;div id='container'&gt;
        &lt;form action='/edit-student' method='post' id='editStudent'&gt;
          &lt;p&gt;Name
            &lt;input type='text' name='name' class='txt' value='kaori kawai' /&gt;
          &lt;/p&gt;
          &lt;p&gt;Email
            &lt;input type='email' name='email' class='txt' value='test2@gmail.com' /&gt;
          &lt;/p&gt;
          &lt;p&gt;Passes
            &lt;select name='passList'&gt;
  &lt;option id='pass' value='(TYPE M DATE 2015-01-05T20:33:05.000000+09:00 AMT
                            17000)'&gt;Jan 2015
  &lt;/option&gt;
  &lt;option id='pass' value='(TYPE W DATE 2014-12-29T20:00:38.000000+09:00 AMT 6000)'&gt;Dec 2014
  &lt;/option&gt;
            &lt;/select&gt;
            &lt;button type='button' id='getPass' onclick='openFuns(this.form);' class='btn'&gt;Get Pass
            &lt;/button&gt;
          &lt;/p&gt;
          &lt;p&gt;
            &lt;input type='submit' value='Edit Info' class='btn' /&gt;
          &lt;/p&gt;
        &lt;/form&gt;
        &lt;dialog id='editPassDialog'&gt;
          &lt;h1&gt;Edit Pass
          &lt;/h1&gt;
          &lt;form action='edit-pass' method='post' id='editPass'&gt;
            &lt;p&gt;Date bought
              &lt;input type='text' name='date' class='txt' /&gt;
            &lt;/p&gt;
            &lt;p&gt;Type
              &lt;inut type='text' name='type' class='txt'&gt;&lt;/inut&gt;
            &lt;/p&gt;
            &lt;p&gt;Amount Paid
              &lt;input type='text' name='amt' /&gt;
            &lt;/p&gt;
            &lt;p&gt;
              &lt;input type='submit' value='Edit Pass' class='btn' id='submitPass' /&gt;
            &lt;/p&gt;
          &lt;/form&gt;
        &lt;/dialog&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So the ideal behavior is that it would update the date field in the dialog with whatever the selected option is from the drop-down list "Passes", but that's not happening. I know that the form data is passed correctly to the function <code>openFuns()</code> because if I use <code>console.log</code> or <code>alert</code> it displays the information of the selected option.</p>