Элемент выбора формы имеет неопределенное значение

Question

Я немного прочитал о подъеме, но я не уверен, как он применяется в этой ситуации. У меня есть значение выбора, которое отображается и скрывается динамически, и значение этого элемента выбора всегда не определено. Пожалуйста помоги! Благодаря

HTML

<tr> 
    <td>Type:</td> 
    <td> 
     <select id="type" onchange="rulesShown()"> 
      <option value="ATC">ATC</option> 
      <option value="PILOT">PILOT</option> 
     <select> 
    </td> 
</tr> 
<tr id="rules"> 
    <td>Rules:</td> 
    <td> 
     <select id="rules"> 
      <option value="FAA">FAA</option> 
      <option value="ICAO">ICAO</option> 
     <select> 
    </td> 
</tr> 

Javascript:

<script> 
    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 = <?php echo $user['vid'] ?>; 
     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 && 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+"&email="+email+"&type="+type+"&rules="+rules+"&comments="+comments); 
    } 
</script> 

Нет необходимости в файле AJAX звонит. Это просто POST - это «правила». Насколько я могу судить, это проблема с javascript hoisting, но я не знаю почему. Спасибо

Answer 1

Это не имеет никакого отношения к подъеме, которое является чистой концепцией javascript. У вас есть два элемента с одинаковым идентификатором. A <tr> и a <select>. Это запрещено html. Одним из следствий этого является то, что браузер не гарантирует, какой элемент будет возвращен getElementById()