JSP中表單內容實現分頁提交
頁面要求:在註冊頁面中需要完成註冊的資訊比較的多,需要分多頁進行內容填寫。
通過 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="下一步" onclick="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" onfocus="if(value!=null){value=''}"
onblur="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="上一步" onclick="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>