title: Select form item has undefined value
body: <p>I have read a little about hoisting, but I am not sure how it applies in this situation. I have a select value that is shown and hidden dynamically and the value of this select element is always undefined. Please help! Thanks</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;tr&gt;
      &lt;td&gt;Type:&lt;/td&gt;
      &lt;td&gt;
          &lt;select id="type" onchange="rulesShown()"&gt;
              &lt;option value="ATC"&gt;ATC&lt;/option&gt;
              &lt;option value="PILOT"&gt;PILOT&lt;/option&gt;
          &lt;select&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr id="rules"&gt;
      &lt;td&gt;Rules:&lt;/td&gt;
      &lt;td&gt;
          &lt;select id="rules"&gt;
              &lt;option value="FAA"&gt;FAA&lt;/option&gt;
              &lt;option value="ICAO"&gt;ICAO&lt;/option&gt;
          &lt;select&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>&lt;script&gt;
      function rulesShown() {
          if(document.getElementById("type").value=="ATC"){
              document.getElementById("rules").style.display = "";
              document.getElementById("rules").style.removeProperty( 'display' );
          }
          else{
              document.getElementById("rules").style.display = "none";
          }
      }
      function verifyData() {
          var email1 = document.getElementById("email1");
          var email2 = document.getElementById("email2");
          var comments = document.getElementById("comments").value;
          if(comments!=""){
              if(email2==null){
                      //submit form
                      submit();
              }
              else if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email1.value)){  
                  if(email1.value == email2.value) {
                      //submit form
                      submit();
                  }
                  else {
                      //emails dont match
                      alert('Email addresses do not match!');
                  }
              }
              else{
                  //invalid email address
                  alert('Please enter a valid email address!');
              }
          }
          else{
              alert('Please enter some comments!');
          }
      }
      function submit(){
          var vid = &lt;?php echo $user['vid'] ?&gt;;
          var email = document.getElementById("email1").value;
          var type = document.getElementById("type").value;
          var rules = document.getElementById("rules").value;
          var comments = document.getElementById("comments").value;
          var xhttp;
          if (window.XMLHttpRequest) {
              xhttp = new XMLHttpRequest();
          } else {
              // code for IE6, IE5
              xhttp = new ActiveXObject("Microsoft.XMLHTTP");
          }
          xhttp.onreadystatechange = function() {
              if (xhttp.readyState == 4 &amp;&amp; xhttp.status == 200) {
                  document.getElementById("page").innerHTML = xhttp.responseText;
              }
          }
          xhttp.open("POST", "/content/training/request/submit.php", true);
          xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
          xhttp.send("vid="+vid+"&amp;email="+email+"&amp;type="+type+"&amp;rules="+rules+"&amp;comments="+comments);
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>No need for the file the AJAX is calling. It simply POST's the 'rules'. As far as I can tell this is a javascript hoisting problem, but I don't know why. Thanks</p>