title: onchange not working in table using JavaScript
body: <p>so I am having an issue figuring out why my <code>onchange</code> event isn't firing. To start off here is a copy of my table and my JavaScript</p>
  
  <p>Table:</p>
  
  <pre><code>&lt;form name="form1" action="submit.php" method='POST'&gt;
      &lt;table border="0" class="signUp"&gt;
      &lt;tr&gt;&lt;td align="center" class= "signUpfont"&gt; Sign up for FREE &lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;&lt;input type="text" text="First Name" class='signUpinput' id="fname" name="fname" placeholder="First Name" /&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;&lt;input type="text" class='signUpinput' id="lname" name="lname" placeholder="Last Name"/&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;&lt;input type="text" class='signUpinput' id="email" name="email" placeholder="Email"/&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;&lt;input type="text" class='signUpinput' id="email2" name="email2"  placeholder="Re-enter Email"/&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;&lt;input type="password" class='signUpinput' id="pass" name="pass" placeholder="Password"/&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;
                      &lt;select name="country" onchange="getStates()" style="color: white; background-color: #2B4478;"&gt;
          &lt;option value="0"&gt;Select State&lt;/option&gt;
          &lt;option value="louisiana"&gt;Louisiana&lt;/option&gt;
          &lt;option value="texas"&gt;Texas&lt;/option&gt;
          &lt;option value="alabama"&gt;Alabama&lt;/option&gt;
          &lt;option value="mississippi"&gt;Mississippi&lt;/option&gt;
      &lt;/select&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
          &lt;td&gt;&lt;select name="school" style="color: white;background-color: #2B4478;"&gt;
          &lt;option value=""&gt;Select School&lt;/option&gt;
      &lt;/select&gt;&lt;/td&gt;&lt;/tr&gt;
  
      &lt;tr&gt;&lt;td&gt;&lt;input type="submit" name="submit" value="Sign Up" style="color:white; background-color:#2B4478; width: 100px;margin-left: 52px;"&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p></p>
  
  <p>Javascript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      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)
              }
      }
  </code></pre>
  
  <p></p>
  
  <p>Any pointers to something I am doing wrong would be much appreciated.  If I put both the dropdowns in the same  and start the form in that, the script will work, but I can't get the rest of the table information.</p>