Issue
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.
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 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>
Best regards,
Solution
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 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>
Answered By - Awais Latif
Answer Checked By - Mildred Charles (JavaFixing Admin)