onchange가

Question

JavaScript를 사용하는 테이블에서 작동하지 않아서 내 onchange 이벤트가 실행되지 않는 이유를 파악하는 데 문제가 있습니다. 여기 시작하려면 내 테이블의 복사 및 내 자바 스크립트입니다

테이블 :

<form name="form1" action="submit.php" method='POST'> 
    <table border="0" class="signUp"> 
    <tr><td align="center" class= "signUpfont"> Sign up for FREE </td></tr> 
    <tr><td><input type="text" text="First Name" class='signUpinput' id="fname" name="fname" placeholder="First Name" /></td></tr> 
    <tr><td><input type="text" class='signUpinput' id="lname" name="lname" placeholder="Last Name"/></td></tr> 
    <tr><td><input type="text" class='signUpinput' id="email" name="email" placeholder="Email"/></td></tr> 
    <tr><td><input type="text" class='signUpinput' id="email2" name="email2" placeholder="Re-enter Email"/></td></tr> 
    <tr><td><input type="password" class='signUpinput' id="pass" name="pass" placeholder="Password"/></td></tr> 
    <tr><td> 
        <select name="country" onchange="getStates()" style="color: white; background-color: #2B4478;"> 
     <option value="0">Select State</option> 
     <option value="louisiana">Louisiana</option> 
     <option value="texas">Texas</option> 
     <option value="alabama">Alabama</option> 
     <option value="mississippi">Mississippi</option> 
    </select></td> 
      </tr> 
      <tr> 
     <td><select name="school" style="color: white;background-color: #2B4478;"> 
     <option value="">Select School</option> 
    </select></td></tr> 

    <tr><td><input type="submit" name="submit" value="Sign Up" style="color:white; background-color:#2B4478; width: 100px;margin-left: 52px;"></td></tr> 
</table> 

자바 스크립트 :

<script type="text/javascript"> 
    function getStates() 
    { 
     var xmlhttp; 
     try{ 
      xmlhttp = new XMLHttpRequest; 
      }catch(e) 
      { 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
       } 

     if(xmlhttp) 
      { 
       var form = document['form1']; 
       var country = form['country'].value; 

       xmlhttp.open("GET", "getSchools.php?country="+country, true); 

       xmlhttp.onreadystatechange = function() 
       { 
        if(this.readyState == 4) 
        { 
         var s = document.createElement('select'); 
         s.name = "school"; 
         s.style.color = "white"; 
         s.style.background = "#2b4478"; 
         s.innerHTML = this.responseText; 

         if(form['school']) 
         { 
          form.replaceChild(s, form['school']); 

         }else 
          form.insertBefore(s, form['submit']); 
        } 
       }     

       xmlhttp.send(null) 
      } 
    } 

내가 뭐하는 거지 뭔가 모든 포인터를 잘못을 많이 인정할 것입니다. 같은 드롭 다운을 두 개 넣고 그 안에 폼을 시작하면 스크립트는 작동하지만 나머지 테이블 정보는 얻을 수 없습니다.

Answer 1

귀하의 기능이 올바르게 실행 중입니다. 디버거의 함수에 중단 점을 설정하고 중단 점에 도달했는지 여부를 확인하십시오.

는

function getStates() 
    { 
     console.log('getStates fired'); 
    } 

Answer 2

http://jsfiddle.net/7VWhx/1/이 getStates() 존재하는 onchange를 이벤트가 발생, 즉를 정의하는 스크립트가 이미 이전에 실행해야 할 때 있는지 확인하십시오.

Answer 3

"getStates"기능이 실행시 HTML에 액세스 할 수 있는지 확인하십시오. http://jsfiddle.net/2GbH8/

바이올린 조금 이상한 일을하지, 그래서 전역 변수에 기능을 할당했다 : 여기 바이올린은 그것이 그렇게 지정되면

getStates = function getStates() {...} 

바이올린 작동합니다.