如何在中的第一个下拉列表中停止提交。jsp？

Question

我有一个名为add.jsp的文件，我用Java将数据添加到数据库中。

在这个文件中，我使用第一个下拉列表从数据库中获取联赛，该联赛的球队显示在所选联赛的第二和第三个下拉列表中。

表格开始如下。

由于onChange="this.form.submit（）；"位于第一个下拉列表部分，当进行选择时，表单提交并转到addemp servlet。

当我从第一个下拉列表中选择联赛时，如何防止表单提交？在选择所有数据并登录后，我如何才能在单击底部的提交按钮时将其转到addemp servlet？

我的代码如下身体标签之间...

截图在这里

没有onChange事件截图在这里

<div class="row justify-content-center">
    <div class="col-sm-4">


        <form class="form-group" action="addemp" method="post">


            <label class="form-label" for="name">Choose a League </label> <select
                name="leagues" id="leagues" class="form-control mb-3"
                style="width: 200px;" onchange="this.form.submit();">
                <option value="0">Select League</option>
                <%
        Connection conn;
        Statement stm;
        ResultSet rs;

        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/teams", "root", "Fener2013");
            String query = "select * from leagues";
            stm = conn.createStatement();
            rs = stm.executeQuery(query);
            while (rs.next()) {
        %>
                <option value="<%=rs.getInt("league_id")%>"
                    <%
            if(request.getParameter("leagues")!= null) 
            {
                if(rs.getInt("league_id")==Integer.parseInt(request.getParameter("leagues"))) 
                {
                    out.print("selected");
                }
            }
            %>><%=rs.getString("league_name")%></option>
                <%
            }
        } 
        catch (Exception ex) {
        ex.printStackTrace();
        }
            %>
            </select> <label class="form-label" for="name">Home Team</label> <select
                name="home_team" class="form-control mb-3" style="width: 200px;">
                <option value="0">Select Home Team</option>
                <%
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/teams", "root", "Fener2013");
            String query = "select * from teams where league_id=?";
            PreparedStatement psmt = con.prepareStatement(query);
            psmt.setString(1, request.getParameter("leagues"));
            ResultSet rset = psmt.executeQuery();
            while(rset.next()) 
            {
            %>
                <option value="<%=rset.getInt("team_id")%>">
                    <%=rset.getString("team_name")%></option>
                <%
            }
        } 
        catch (Exception ex) {
        ex.printStackTrace();
        }
            %>
            </select> <label class="form-label" for="name">Away Team</label> <select
                name="home_team" class="form-control mb-3" style="width: 200px;">
                <option value="0">Select Away Team</option>
                <%
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/teams", "root", "Fener2013");
            String query = "select * from teams where league_id=?";
            PreparedStatement psmt = con.prepareStatement(query);
            psmt.setString(1, request.getParameter("leagues"));
            ResultSet rset = psmt.executeQuery();
            while(rset.next()) 
            {
            %>
                <option value="<%=rset.getInt("team_id")%>">
                    <%=rset.getString("team_name")%></option>
                <%
            }
        } 
        catch (Exception ex) {
        ex.printStackTrace();
        }
            %>
            </select> <label class="form-label" for="name">Enter Match Date
                (YYYY-MM-DD)</label> <input name="match_date" type="text"
                class="form-control mb-3" style="width: 200px"> <label
                class="form-label" for="name">Home Score</label> <input
                name="home_score" type="text" class="form-control mb-3"
                style="width: 200px;"> <label class="form-label"
                for="name">Away Score</label> <input name="away_score" type="text"
                class="form-control mb-3" style="width: 200px;"> <label
                class="form-label" for="name">Home Team HT Score</label> <input
                name="home_ht_score" type="text" class="form-control mb-3"
                style="width: 200px;"> <label class="form-label"
                for="name">Away Team HT Score</label> <input name="away_ht_score"
                type="text" class="form-control mb-3" style="width: 200px;">

            <label class="form-label" for="name">Week</label> <input
                name="week" type="text" class="form-control mb-3"
                style="width: 200px;">

            <div class="d-md-flex justify-content-md-end">
                <button class="btn btn-primary mb-4" type="submit">Save
                    Match Result</button>
            </div>
        </form>
    </div>
</div>

最好的问候，

Answer 1

首先，我想知道你为什么在选择上添加onChange？你想在onChange活动上做些什么吗？如果我考虑当前给定的信息，然后从选择中删除onChange。提交按钮已经很好去.它的类型是提交它应该工作。

如果它不起作用，让我知道更多的细节，我会试着解决你的问题。

从这里更新：

您需要创建一个javascript函数，并在更改first select时调用它。此函数将在当前url中重新加载当前页面的选定值。

funtion onLeagueChange(){
  var leagueValue = document.getElementById("leagues").value;
  window.location = your_url + "?leagues="+value;
}

这是解决您的问题而不使用和其他文件。