I have a file called add.jsp that I add data to the database with Java.
In this file, I bring the leagues from the database with the first dropdownlist, and the teams of that league are displayed in the 2nd and 3rd Dropdown lists of the selected league.
The form starts as follows.
Since onchange="this.form.submit();" is in the first dropdown list section, when the selection is made, the form submits and goes to the addemp servlet.
How do I prevent the form from submitting when I select the Leagues from the first dropdown list? and how do I make it go to the addemp servlet only when I click on the bottom submit button after selecting all the data and logging in?
My code is as below between body tags..
Without onchange event screenshot is here
<div >
<div >
<form action="addemp" method="post">
<label for="name">Choose a League </label> <select
name="leagues" id="leagues"
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 for="name">Home Team</label> <select
name="home_team" 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 for="name">Away Team</label> <select
name="home_team" 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 for="name">Enter Match Date
(YYYY-MM-DD)</label> <input name="match_date" type="text"
style="width: 200px"> <label
for="name">Home Score</label> <input
name="home_score" type="text"
style="width: 200px;"> <label
for="name">Away Score</label> <input name="away_score" type="text"
style="width: 200px;"> <label
for="name">Home Team HT Score</label> <input
name="home_ht_score" type="text"
style="width: 200px;"> <label
for="name">Away Team HT Score</label> <input name="away_ht_score"
type="text" style="width: 200px;">
<label for="name">Week</label> <input
name="week" type="text"
style="width: 200px;">
<div >
<button type="submit">Save
Match Result</button>
</div>
</form>
</div>
</div>
Best regards,
CodePudding user response：
First I want to know why do you add onChange on select? do you want to do anything on onchange event? If I consider current given information then just remove onChange from select. Submit button is already good to go. its type is submit it should work.
If it does not work, let me know more details, I will try to solve your issue.
Updated from here:
you need to create a javascript function and call it onChange of first select. this function will reload this current page selected value of selection in current url.
funtion onLeagueChange(){
var leagueValue = document.getElementById("leagues").value;
window.location.href = your_url "?leagues=" leagueValue;
}
this is solve your problem without using and other file.
Your Updated Code
<div >
<div >
<form action="addemp" method="post">
<label for="name">Choose a League </label> <select
name="leagues" id="leagues"
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 for="name">Home Team</label> <select
name="home_team" 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 for="name">Away Team</label> <select
name="home_team" 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 for="name">Enter Match Date
(YYYY-MM-DD)</label> <input name="match_date" type="text"
style="width: 200px"> <label
for="name">Home Score</label> <input
name="home_score" type="text"
style="width: 200px;"> <label
for="name">Away Score</label> <input name="away_score" type="text"
style="width: 200px;"> <label
for="name">Home Team HT Score</label> <input
name="home_ht_score" type="text"
style="width: 200px;"> <label
for="name">Away Team HT Score</label> <input name="away_ht_score"
type="text" style="width: 200px;">
<label for="name">Week</label> <input
name="week" type="text"
style="width: 200px;">
<div >
<button type="submit">Save
Match Result</button>
</div>
</form>
</div>