夢想飛翔

自強不息

posts - 111, comments - 30, trackbacks - 0, articles - 0

BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合

:: 管理

javascript 父子頁面傳值表單提交

Posted on 2009-09-24 14:25 love1563 閱讀(1861) 評論(0) 編輯收藏所屬分類: Java語言*初級版

javascript 父子頁面傳值結合struts表單提交

需求如下：
父頁面，要通過表單(FormBean)提交，表單中有一個屬性是通過打開一個子頁面輸入值，然后回填到父頁面中，最后通過父頁面的表單去提交。

javascript 父子頁面傳值結合struts表單提交

父子頁面傳值，用javascript解決，是一個很好的方案，在這里我也是參考網上其他的用法寫的。

需求如下：
父頁面，要通過表單(FormBean)提交，表單中有一個屬性是通過打開一個子頁面輸入值，然后回填到父頁面中，最后通過父頁面的表單去提交。

父頁面參考如下：

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../../common/taglibs.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html:html lang="true">
<head>
<html:base />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>設備信息查詢</title>
<link rel="stylesheet" type="text/css" href="../../../css/main.css">
<script type="text/javascript">
function pop(){
var srcFile = "../pop/ChooseUserSet.jsp";
var winFeatures = "dialogHeight:300px; dialogLeft:200px;";
var obj = document.getElementsByName("userForm");
var showUserSet = document.getElementById("showUserSet");
obj.showUserSet = showUserSet;
//alert(obj[0].userset.value);
window.showModalDialog(srcFile, obj, winFeatures);
}
</script>
</head>
<body>
<html:errors />
<h2 align="center"> 用戶管理界面</h2>
<div id="m1" align="center">
<html:form action="/jsp/sec/user/user.do" method="post">
<table width="90%" border="0" cellpadding="0" cellspacing="0" class="table7">
<tr>
<td height="30" class="table-blue1"><div align="left">選擇用戶集</div></td>
<td height="30" colspan="3"><div align="left"><input name="chooseuserset" type="button" class="input2" value="選擇" onClick="pop()"></div></td>
</tr>
<tr>
<td height="30" class="table-blue1"><div align="left">已選擇用戶集</div></td>
<td colspan="3"><div align="left" id="showUserSet"></div></td>
</tr>
<tr>
<td height="30" colspan="3"> </td>
<td><div align="left"><html:submit property="submit" styleClass="input2" value="提交"/></div></td>
</tr>
</table>
<input type="hidden" name="userset"> //html寫法
<html:hidden property="userset"/> //struts寫法
<html:hidden property="action" value="userAdd"/>
</html:form>
</div>
</body>
</html:html>

1. FormBean需要綁定這個隱藏域userset，進行驗證。
2. var showUserSet = document.getElementById("showUserSet");
    obj.showUserSet = showUserSet;
    我動態給obj的對象新增一個屬性，叫showUserSet，為了給彈出頁面傳值。
3. window.showModalDialog(srcFile, obj, winFeatures);
    一定要通過showModalDialog方法。

子頁面參考如下：

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../../common/taglibs.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html:html lang="true">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>設備信息查詢</title>
<link rel="stylesheet" type="text/css" href="../../../css/main.css">
<script type="text/javascript">
function send(userset){
var str = "";
var obj = window.dialogArguments;
var len = userset.length;
for(var i=0;i<len;i++){
if(userset[i].checked){
str += userset[i].value;
str+="|";
}
}
//alert(str.charAt(str.length-1));
if(str.charAt(str.length-1)=="|"){
str = str.substring(0,str.length-1);
}
obj[0].userset.value = str;
obj.showUserSet.innerHTML = str;
window.close();
}
</script>
</head>
<base target="_self">
<body>
<html:errors />
<h2 align="center"> 用戶管理界面</h2>
<div id="m1" align="center">
<form id="userset">
<table width="90%" border="0" cellpadding="2" cellspacing="0" class="table7">
<tr>
<td width="78" height="30" class="table-blue1"><div align="left">用戶集</div></td>
<td colspan="3" class="table-blue2">
<div align="left">
<input type="checkbox" name="u1" value="北京市質量技術監督局領導用戶集">北京市質量技術監督局領導用戶集<br/>
<input type="checkbox" name="u1" value="北京市西城區城管執法局高級指揮員用戶集">北京市西城區城管執法局高級指揮員用戶集<br/>
<input type="checkbox" name="u1" value="北京市朝陽區環境保護局指揮員用戶集">北京市朝陽區環境保護局指揮員用戶集<br/>
</div>
</td>
</tr>
<tr>
<td> </td>
<td><div align="left"><input name="choose" type="button" class="input2" value="選擇" onclick="send(userset.u1)"></div></td>
</tr>
</table>
</form>
</div>
</body>
</html:html>

1. var obj = window.dialogArguments; 接收到父頁面傳來的對象。
2. <base target="_self"> 必需要有。
3. for(var i=0;i<len;i++){
     if(userset[i].checked){
    str += userset[i].value;
    str+="|";
    }
   }
    用"|"作為多個值的分融符

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: 用 Struts 實現動態單選按鈕 javascript 父子頁面傳值表單提交父子頁面傳值問題！ Java語言深入 JAVA之精髓IO流把java生成可執行文件需要第三方軟件的支持，不過在沒有安裝JDK的機器上是不可能運行JAVA程序的，哪怕是編譯成為exe文件。 JAVA中的指針,引用及對象的clone（http://www.ibm.com/developerworks/cn/java/l-jpointer/index.html） j2me學習資源網站（轉）命名規范(Naming Conventions) java.lang包概述（可以當作學習索引） Java多線程編程基礎之線程對象

夢想飛翔

javascript 父子頁面傳值表單提交

日歷

常用鏈接

留言簿(5)

隨筆分類(91)

隨筆檔案(110)

Java世界社區

搜索

積分與排名

最新評論

閱讀排行榜

評論排行榜

夢想飛翔

javascript 父子頁面傳值 表單提交

日歷

常用鏈接

留言簿(5)

隨筆分類(91)

隨筆檔案(110)

Java世界社區

搜索

積分與排名

最新評論

閱讀排行榜

評論排行榜

javascript 父子頁面傳值表單提交