Issue with getting values from <select> form in javascript

Question

How come I can get the result from the "Från omgång" list but not the "Till Omgång" ?

Check the Filter button to the right on this page here and select the second value in the "till omgång" field and you get an error.

I don't know why the value is null in the second field, have double checked that it is spelled correct. HTML Code

<table id="filter-menu-left">
                    <thead>
                        <tr><th id="filterHead" colspan="2"> <h2>Filter</h2></th></tr>
                    </thead>
                <tbody>
                <tr>
                <td>Från omgång</td>
                <td>Till Omgång</td>
                </tr>
                <td>
                <form name='from' method='post' action='formhandler.cgi' id="to">
                <select name='title' onchange='javascript:selectGamesToShowFrom();'>
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                      <option value="4">4</option>
                      <option value="5">5</option>
                      <option value="6">6</option>
                      <option value="7">7</option>
                      <option value="8">8</option>
                      <option value="9">9</option>
                      <option value="10">10</option>
                      <option value="11">11</option>
                      <option value="12">12</option>
                      <option value="13">13</option>
                      <option value="14">14</option>
                      <option value="15">15</option>
                      <option value="16">16</option>
                      <option value="17">17</option>
                      <option value="18">18</option>
                      <option value="19">19</option>
                      <option value="20">20</option>
                      <option value="21">21</option>
                      <option value="22">22</option>
                      <option value="23">23</option>
                      <option value="24">24</option>
                      <option value="25">25</option>
                      <option value="26">26</option>
                      <option value="27">27</option>
                      <option value="28">28</option>
                      <option value="29">29</option>
                      <option value="30">30</option>
                    </select>
                    </form>
                </td>
                <td>
                <form name='to' method='post' action='formhandler.cgi'>
                <select name='tit' onchange='javascript:selectGamesToShowTo();'>
                      <option value="1">1</option>
                        <option value="2">2</option>


                    </select>
                    </form>
                </tbody>
                </table>

Java script

The method "selectGamesToShowFrom()" works but the value from the "to" form is not reachable in the "selectGamesToShowTo()" method. Can you perhaps find the error?

function selectGamesToShowFrom(){
    var from = document.from.title.value.toString();//This works
    alert(from + "");

    for (i=0; i<allGamesStringArray.length; i++) {
        var current = parseInt(allGamesStringArray[i].substring(allGamesStringArray[i].length-2,allGamesStringArray[i].length));
        var toCompareWith = parseInt(from);
        if(current<toCompareWith){
            allMarkersOnMap[i].setVisible(false);
            //allMarkersOnMap[i].setMap(null);
        }
        else{
        allMarkersOnMap[i].setVisible(true);
        }
        if(allGamesStringArray[i].indexOf(from)!=-1){
            var t = parseInt(allGamesStringArray[i].substring(allGamesStringArray[i].length-2,allGamesStringArray[i].length));          
        }
    }
}

function selectGamesToShowTo(){

var to = document.to.title.value.toString();//This gives an error that its undefined after I have selected a value in the list and I can't find the error
alert(to);
    for (i=0; i>allGamesStringArray.length; i++) {
        var current = parseInt(allGamesStringArray[i].substring(allGamesStringArray[i].length-2,allGamesStringArray[i].length));
        var toCompareWith = parseInt(from);
        if(current>toCompareWith){
            allMarkersOnMap[i].setVisible(false);
        }
        else{
            allMarkersOnMap[i].setVisible(true);
        }
        if(allGamesStringArray[i].indexOf(from)!=-1){
            alert("hejdar");
            var t = parseInt(allGamesStringArray[i].substring(allGamesStringArray[i].length-2,allGamesStringArray[i].length));          
        }
    }
} 

Answer 1

var to = document.to.title.value.toString();

should be

var to = document.to.tit.value.toString();

However, as you noted, some browsers are still not happy. Opera doesn't like that the form name is to , changing it to toForm and updating your code accordingly makes Opera happy again.