JSP中表单内容实现分页提交

最新推荐文章于 2022-02-04 23:37:41 发布

长沟流水去无声

最新推荐文章于 2022-02-04 23:37:41 发布

阅读量1.4k

点赞数

分类专栏： JSP网页编程文章标签：表单分页提交 JSP DIV

本文链接：https://blog.csdn.net/beihuashan/article/details/50316655

版权

JSP网页编程专栏收录该内容

1 篇文章 0 订阅

订阅专栏

页面要求：在注册页面中需要完成注册的信息比较的多，需要分多页进行内容填写。

通过 javascript 设置整个页面的不同模块的 css （即style属性）属性，来决定在点击不同的button 的时候显示不同的注册子页面，这样，页面请求并没有发生改变，只是当前网页显示的内容发生了改变，所以，请求中已填写的参数不会丢失。

页面代码：每个子页面以 div 来分割，所以只要改变相应的div 的visibility 和display 的属性就可以了。（style="visibility:visiable;display:inline" 表示显示页面，style="visibility:hidden;display:none" 表示隐藏页面）;显示代码

<%@ page contentType="text/html; charset=gb2312" language="java"
import="java.sql.*" errorPage=""%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>分页测试</title>
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript">
function showPage(page) {
//var div = document.getElementById(page);
var div=document.getElementById(page);
if (div != null) {
div.style.visibility = "visible";
div.style.display = "inline";
}
}

function hidePage(page) {
//var div = document.getElementByIdx_x_x(page);
var div=document.getElementById(page);
if (div != null) {

div.style.visibility = 'hidden';
div.style.display = 'none';

}
}

function switchPage(hiddenPage, shownPage) {
hidePage(hiddenPage);
showPage(shownPage);
}
</script>
<style>
.td {
width: 110px;
height: 30px;
}
</style>
</head>
<body>
<form action="<%=request.getContextPath()%>/stud_index_evaluationServ"
method="post" name="frm1" enctype="multipart/form-data">

<div id="page1" style="text-align:center; visibility:visible; display: inline">
<center>
<table>
<tr>
<td class="td">姓名</td>
<td class="td"><input type="text" name="name"
value="<%=strName%>" />
<td class="td">性别</td>
<td class="td"><select name="gender" id="gender">
<%
String selectGender = "selected='selected'";
%>
<option value="男"
<%=strGender.equalsIgnoreCase("男") ? selectGender : null%>>男</option>
<option value="党员"
<%=strGender.equalsIgnoreCase("女") ? selectGender : null%>>女</option>
</select></td>
</tr>
<tr>
<td class="td">学号</td>
<td class="td"><input type="text" name="studno"
value=<%=strStudno%> />
<td class="td">身份证号</td>
<td colspan=""><input type="text" name="id" value=<%=strId%> /></td>
</tr>

<tr>
<td class="td">家庭通讯地址</td>
<td colspan="70"><textarea rows="1" cols="57"
name="postaddress" value=<%=strAddress%>></textarea></td>
</tr>
<tr><td class="td" colspan="100" align="center"><input type="button" value="下一步" οnclick="switchPage('page1','page2')"/></td></tr>
</table>
<%
}
%>
</center>
</div>
<div id="page2" style="text-align:center; visibility:hidden; display:none">
<center>
<table>
<tr>
<td class="td">受到惩处情况</td>
<td colspan=""><textarea rows="5" cols="45"
name="achievepunishment" οnfοcus="if(value!=null){value=''}"
οnblur="if(value==''){value='请输入内容'}">统计所有处罚情况、包括收到院级通报批判以上的各类通报即学校处分等</textarea>
<td class="td">上传材料附件</td>
<td class="td"><input type="file" name="filepunishment"
id="filepunishment" value="附件"> </input></td></td>
</tr>
<tr><td class="td" colspan="100" align="center"><input type="button" value="上一步" οnclick="switchPage('page2','page1')"/></td></tr>
<tr>
<td class="td" colspan="100" align="center"><input
type="submit" id="sub_test" value="提交" />    <input
type="reset" value="重置" />   
<button id="btn" style="display: none">测试JQuery</button></td>
</tr>
</table>
</center>
</div>
</form>
</body>
</html>

长沟流水去无声

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JSP中表单内容实现分页提交

页面要求：在注册页面中需要完成注册的信息比较的多，需要分多页进行内容填写。通过 javascript 设置整个页面的不同模块的 css （即style属性）属性，来决定在点击不同的button 的时候显示不同的注册子页面，这样，页面请求并没有发生改变，只是当前网页显示的内容发生了改变，所以，请求中已填写的参数不会丢失。页面代码：每个子页面以 div 来分割，所以只要改变
复制链接

扫一扫