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

Question

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

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

表格开头如下。

自从 onchange="this.form.submit();"是在第一个下拉列表部分中，当进行选择时，表单提交并转到Addemp Servlet。

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

我的代码在body标签之间如下..

Screenshot is here

Without onchange event screenshot is here

<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

首先我想知道你为什么在select上添加onChange？你想对 onchange 事件做些什么吗？如果我考虑当前给定的信息，那么只需从选择中删除 onChange。提交按钮已经很好了。它的类型是提交它应该可以工作。

如果不起作用，请告诉我更多细节，我会尽力解决您的问题。

从这里更新：

您需要创建一个 javascript 函数并将其称为第一个选择的 onChange。此函数将在当前 url 中重新加载当前页面选择的值。

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

这是在不使用其他文件的情况下解决您的问题。

您的更新代码

<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="onLeagueChange()">
            <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>