html - 使用 jsp 代码的带有下拉列表的 HTML 表单
问题描述
我有这个表格用于将数据插入数据库。我想更改从连接到 mysql 数据库的下拉列表中选择的一个值。
这是表格:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<body>
<div id="container">
<form onsubmit="return checkempty(form1)" action="Data_insert.jsp" method="post" name="form1">
<table id="table" width="25%">
<tr>
<td><label for="emp_name">Name: </label></td>
<td><input type="text" name="emp_name" id="emp_name"></td>
</tr>
<tr>
<td><label for="emp_country">Country: </label></td>
<td><input type="text" name="emp_country" id="emp_country"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="button" id="button" value="Add"></td>
</tr>
</table>
<p><br>
</p>
</form>
</div>
</body>
</html>
但是为了填补这个国家,我想使用一个 jsp 从 Mysql DB 中获取数据,并带有一个 jsp 代码:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<%@ page import="java.sql.*" %>
<%ResultSet resultset =null;%>
<HTML>
<%
try{
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection connection = DriverManager.getConnection("jdbc:mysql://localhost:3306/db","root","1234");
Statement statement = connection.createStatement() ;
resultset =statement.executeQuery("select country_id, country_name from country") ;
%>
<center>
<h1> Drop down box or select element</h1>
<select>
<option value="0">Select Country</option>
<% while(resultset.next()){ %>
<option value="<%=resultset.getInt("country_id")%>"> <%= resultset.getString("country_name")%></option>
<% } %>
</select>
</center>
<%
//**Should I input the codes here?**
}
catch(Exception e)
{
out.println("wrong entry"+e);
}
%>
</BODY>
</HTML>
两个代码独立工作。我的问题是如何将 Country 下拉列表集成到表单中。
谢谢 !
解决方案
您可以通过以下方式实现上述目标:
1)。将您的所有代码放在同一页面中,并使用以下方式为您jquery/js
分配值:<select>
<input..>
//onchange of select this will execute
$("select").on("change", function() {
//getting value of select-box
var value = $(this).val();
//assign value to input with id="emp_country"
$("#emp_country").val(value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!-- put your db connection code here-->
Select-box:
<select>
<option value="0">Select Country</option>
<!--put your option code here-->
<option value="something">Something</option>
</select>
<!--put catch block here-->
<form onsubmit="return checkempty(form1)" action="Data_insert.jsp" method="post" name="form1">
<table id="table" width="25%">
<tr>
<td><label for="emp_name">Name: </label></td>
<td><input type="text" name="emp_name" id="emp_name"></td>
</tr>
<tr>
<td><label for="emp_country">Country: </label></td>
<td><input type="text" name="emp_country" id="emp_country"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="button" id="button" value="Add"></td>
</tr>
</table>
<p><br>
</p>
</form>
2) .InCountryDropdown.jsp
把你的select-box
里面<form></form>
有一个提交按钮,如下所示:
<form method="post" action="Yourformpagename">
<%
<!--connection code->
%>
<center>
<h1> Drop down box or select element</h1>
<select name="country">
<option value="0">Select Country</option>
<% while(resultset.next()){ %>
<option value="<%=resultset.getInt(" country_id ")%>">
<%= resultset.getString("country_name")%>
</option>
<% } %>
</select>
</center>
<%
<!--catch block code here-->
%>
<input type="submit" value="SEND" />
</form>
然后在您的表单页面中获取它,如下所示:
<input type="text" name="emp_country" id="emp_country" value="${param.country}"/>
推荐阅读
- angular - RxJS 6 switchMap 不推荐使用的符号
- php - 如何在 PHP 查询中获取返回值
- amazon-web-services - Amazon DynamoDB 重载全球二级索引 - 我做得对吗?
- c# - C# - 自动查找 imap 主机名
- python - 错误 ImportError:在使用 pyenv 的虚拟环境中没有名为“编码”的模块
- ios - AVAudioPlayer 播放声音取决于我创建 AVAudioPlayer 实例的位置
- html - 在窗口调整大小期间,浮动到左侧的 div 旁边的信息下降
- python - pandas Morningstar API 中使用的代码
- amazon-web-services - AWS Cloud Formation WordPress URL 超时
- php - 比较许多大文件时,PHP is_dir 函数太慢