title: Interactive Form depending on Select List not working
body: <p>So I am trying to make this clip submission form interactive in the following way:</p>
  
  <p>I want the second Select list choices to change according to which city is selected in the first select list. </p>
  
  <p>Here is my script function code: </p>
  
  <pre><code>&lt;script&gt;
  function spotListChange(s1, s2) {
      var s1 = document.getElementById(s1);
      var s2 = document.getElementById(s2);
      s2.innerHTML = "";
      if(s1.value == ""){
          var optionArray = ["|"];
      }
      &lt;?php
      while ($cityList = $cityListDB-&gt;fetch()) {
          $city = $cityList['city'];
          $spotList = $db-&gt;query("SELECT * FROM spots WHERE city='$city' ORDER BY name");
          ?&gt;
          else if(s1.value == "&lt;?php echo $city; ?&gt;"){
              var optionArray = ["|"
                                  &lt;?php
                                  while ($spot = $spotList-&gt;fetch()) {
                                      echo ", \"" . $spot['city'] . "|" . $spot['city'] . "\"";
                                  }
                                  ?&gt;
                                  ];
          }
  
      &lt;?php
      }
      ?&gt;
  
      for(var option in optionArray){
          var pair = optionArray[option].split("|");
          var newOption = document.createElement("option");
          newOption.value = pair[0];
          newOption.innerHTML = pair[1];
          s2.options.add(newOption);
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is the part of the form with the two select lists. (I'll get rid of most city options available just to make the code shorter)</p>
  
  <pre><code>    &lt;select id="city" name="city" style="margin-left: 135px;" onChange="spotListChange('city', 'spotSelectList')" required&gt;
          &lt;option value="" selected="selected"&gt;Ville...&lt;/option&gt;
          &lt;option value="Albanel"&gt;Albanel&lt;/option&gt;
          &lt;option value="Alma"&gt;Alma&lt;/option&gt;
          &lt;option value="La Doré"&gt;La Doré&lt;/option&gt;
          &lt;option value="Saint-Félicien"&gt;Saint-Félicien&lt;/option&gt;
          &lt;option value="Mashteuiatsh"&gt;Mashteuiatsh&lt;/option&gt;  
      &lt;/select&gt;&lt;br /&gt;
      &lt;select id="spotSelectList" name="spot" style="margin-left: 135px;"&gt;
      &lt;/select&gt;
  </code></pre>
  
  <p>If I change the PHP inside the else if by fix/text values, it works fine, so the issue must be there, but I don't get where the issue is.</p>