avoid load of javascript onchange function on startup of jsp

My <script></script> loads on startup with the onchange function ( onchangeFunction() ) with it. That means without the onchange event (selecting from drop down form) actually took place.

This means the function accessing null/unavailable variables end raising exception.

HTML

<td align="center" valign="top" class="reservation">
    <form name="showSelector">
        <h2 style="font-family:arial"> הזמנת כרטיסים: </h2>
        <select name="Theater" class="selectFirst" onchange="theaterChange()">
            <option value="999">theater...</option>

            <c:forEach var="theater" items="${theaters}" varStatus="iter">

                <option value="${theaters[iter.index].id}">"${theaters[iter.index].name}"    
                </option>

            </c:forEach>

        </select>
        <select name="Movie">
            <option>movie...</option>
        </select>
        <p></p>
        <input type="submit" value="continue">
    </form>
</td>

JavaScript

var group = new Array()
var temp = document.showSelector.Movie
var selectedTheater = -1;

function theaterChange() {
    selectedTheater = document.showSelector.Theater;
    var selcetedTheaterId = selectedTheater.options[selectedTheater.selectedIndex].value;
    var selcetedTheaterName = selectedTheater.options[selectedTheater.selectedIndex].text;
    if (1 == 555) { //this is trying to avoid the function content, but debugger continues as if condition is true
        <% for (int i = 0; i < showIds.length; i++) { % >
            if ( <%= showAtTheater[i] %> == selcetedTheaterId) { <% MovieIdInSelectedTheater.add(showAtTheater[i]);
                idx = 0;
                boolean found = false;
                while (!found & idx < showAtTheater.length & idx < movieIds.length) {
                    if (showAtTheater[i] == movieIds[idx]) {
                        MovieNameInSelectedTheater.add(movieNames[idx]);
                        found = true;
                    } else {
                        idx++;
                    }
                } %>
            }
        <% } %>
        //...removed some function logic
        temp.options[0].selected = true
    }
}

servlet

out.write("<script>\n");
      out.write("var group=new Array()\n");
      out.write("\n");
      out.write("var temp=document.showSelector.Movie\n");
      out.write("var selectedTheater=-1;\n");
      out.write("\n");
      out.write("function theaterChange(){\n");
      out.write("\n");
      out.write("selectedTheater = document.showSelector.Theater;\n");
      out.write("var selcetedTheaterId = selectedTheater.options[selectedTheater.selectedIndex].value;\n");
      out.write("//var selcetedTheaterName = selectedTheater.options[selectedTheater.selectedIndex].text;\n");
      out开发者_StackOverflow社区.write("\n");
 MovieNameInSelectedTheater.clear(); 
      out.write('\n');
 MovieIdInSelectedTheater.clear(); 
      out.write("\n");
      out.write("\n");
      out.write("\n");
 for (int i=0;i<showIds.length;i++ ){ 
      out.write("\n");
      out.write("        if (");
      out.print(showAtTheater[i]);
      out.write(" == selcetedTheaterId)\n");
      out.write("        {\n");
      out.write("            ");

            MovieIdInSelectedTheater.add(showAtTheater[i]);
            idx = 0;
            boolean found = false;
            while (!found & idx<showAtTheater.length & idx<movieIds.length){
                if (showAtTheater[i] == movieIds[idx] )
                    {
                    MovieNameInSelectedTheater.add(movieNames[idx]);
                    found = true;
                    }
                else {idx++;}
            }

      out.write("\n");
      out.write("        }\n");
      out.write("  ");
  } 
      out.write("\n");
      out.write("\n");
      out.write("\n");
 for (int i=0;i<MovieNameInSelectedTheater.size();i++){ 
      out.write("\n");
      out.write("    temp.options[");
      out.print(i);
      out.write("]=new Option(\"");
      out.print( MovieNameInSelectedTheater.get(i) );
      out.write("\",\"");
      out.print( MovieIdInSelectedTheater.get(i) );
      out.write("\")\n");
}
      out.write("\n");
      out.write("\n");
      out.write("\n");
      out.write("\n");
      out.write("\n");
      out.write("\n");
      out.write("temp.options[0].selected=true\n");
      out.write("\n");
      out.write("}\n");
      out.write("\n");
      out.write("</script>");

browser side:

<script>
var group=new Array()

var temp=document.showSelector.Movie
var selectedTheater=-1;

function theaterChange(){

selectedTheater = document.showSelector.Theater;
var selcetedTheaterId = selectedTheater.options[selectedTheater.selectedIndex].value;
//var selcetedTheaterName = selectedTheater.options[selectedTheater.selectedIndex].text;






        if (2 == selcetedTheaterId)
        {

        }









temp.options[0].selected=true

}

</script>

---

You're expecting that Java/JSP and JavaScript runs in sync, line by line, in the webbrowser. This is untrue. Java/JSP runs at webserver and produces HTML/CSS/JS. Webserver sends it to webbrowser which in turn runs HTML/CSS/JS. If Java/JSP has done its task properly, you should not see any line of it in generated HTML/CSS/JS source. Webbrowser doesn't understand Java/JSP code anyway.

I understand that you want to be able to populate child/nested dropdowns. You'll have to take a totally different approach. There are basically 3 ways:

1. Let JavaScript submit the form during the onchange like onchange="submit()" and let Java/JSP dynamically print the desired <option> values for the child dropdown based on the selected value of the parent dropdown.

2. Let Java/JSP print all possible values in flavor of a JavaScript monster array and let JavaScript populate it based on the information provided by the array during the onchange like onchange="populateChild(this)".

3. Let JavaScript send an ajax request with the selected value as parameter to a servlet which in turn returns the values for the child dropdown based on the selected value and let JavaScript populate it. jQuery is very helpful in this.

More detailed code examples can be found in this answer.