梦想飞翔

自强不息
posts - 111, comments - 30, trackbacks - 0, articles - 0
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

javascript 父子页面传值 表单提交

Posted on 2009-09-24 14:25 love1563 阅读(1841) 评论(0)  编辑  收藏 所属分类: Java语言*初级版

javascript 父子页面传值 结合struts表单提交

需求如下：
父页面，要通过表单(FormBean)提交，表单中有一个属性是通过打开一个子页面输入值，然后回填到父页面中，最后通过父页面的表单去提交。

javascript 父子页面传值 结合struts表单提交

父子页面传值，用javascript解决，是一个很好的方案，在这里我也是参考网上其他的用法写的。

需求如下：
父页面，要通过表单(FormBean)提交，表单中有一个属性是通过打开一个子页面输入值，然后回填到父页面中，最后通过父页面的表单去提交。

父页面参考如下：

  1. <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <%@ include file="../../common/taglibs.jsp"%>
  3.  
  4. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  5. <html:html lang="true">
  6. <head>
  7.       <html:base />
  8.       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  9.       <title>设备信息查询</title>
  10.       <link rel="stylesheet" type="text/css" href="../../../css/main.css">
  11.       <script type="text/javascript">
  12.       function pop(){
  13.        var srcFile = "../pop/ChooseUserSet.jsp";
  14.        var winFeatures = "dialogHeight:300px; dialogLeft:200px;";
  15.        var obj = document.getElementsByName("userForm");
  16.        var showUserSet = document.getElementById("showUserSet");
  17.        obj.showUserSet = showUserSet;
  18.       
  19.        //alert(obj[0].userset.value);
  20.        window.showModalDialog(srcFile, obj, winFeatures);
  21. }
  22.       </script>
  23. </head>
  24.  
  25. <body>
  26.       <html:errors />
  27.       <h2 align="center"> 用户管理界面</h2>
  28.       <div id="m1" align="center">
  29.       <html:form action="/jsp/sec/user/user.do" method="post">
  30.       
  31.        <table width="90%" border="0" cellpadding="0" cellspacing="0" class="table7">
  32.               <tr>
  33.        <td height="30" class="table-blue1"><div align="left">选择用户集</div></td>
  34.        <td height="30" colspan="3"><div align="left"><input name="chooseuserset" type="button" class="input2" value="选择" onClick="pop()"></div></td>
  35.        </tr>
  36.        <tr>
  37.        <td height="30" class="table-blue1"><div align="left">已选择用户集</div></td>
  38.        <td colspan="3"><div align="left" id="showUserSet"></div></td>
  39.        </tr>
  40.        <tr>
  41.        <td height="30" colspan="3">&nbsp;</td>
  42.        <td><div align="left"><html:submit property="submit" styleClass="input2" value="提交"/></div></td>
  43.        </tr>
  44.        </table>
  45.        <input type="hidden" name="userset">              //html写法
  46.        <html:hidden property="userset"/>                      //struts写法
  47.        <html:hidden property="action" value="userAdd"/>
  48.        </html:form>
  49.       </div>
  50. </body>
  51. </html:html>

1. FormBean需要绑定这个隐藏域userset，进行验证。
2. var showUserSet = document.getElementById("showUserSet");
    obj.showUserSet = showUserSet;
    我动态给obj的对象新增一个属性，叫showUserSet，为了给弹出页面传值。
3. window.showModalDialog(srcFile, obj, winFeatures);
    一定要通过showModalDialog方法。

子页面参考如下：

  1. <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <%@ include file="../../common/taglibs.jsp"%>
  3.  
  4. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  5. <html:html lang="true">
  6. <head>
  7.       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  8.       <title>设备信息查询</title>
  9.       <link rel="stylesheet" type="text/css" href="../../../css/main.css">
  10.       <script type="text/javascript">
  11.        function send(userset){
  12.              var str = "";
  13.             var obj = window.dialogArguments;
  14.             var len = userset.length;
  15.             for(var i=0;i<len;i++){
  16.                   if(userset[i].checked){
  17.                         str += userset[i].value;
  18.                         str+="|";
  19.                   }
  20.             }
  21.             
  22.             //alert(str.charAt(str.length-1));
  23.             if(str.charAt(str.length-1)=="|"){
  24.                   str = str.substring(0,str.length-1);      
  25.             }
  26.             
  27.             obj[0].userset.value = str;
  28.             obj.showUserSet.innerHTML = str;
  29.             window.close();
  30.        }
  31.       </script>
  32. </head>
  33. <base target="_self">
  34.  
  35. <body>
  36.       <html:errors />
  37.       <h2 align="center"> 用户管理界面</h2>
  38.       <div id="m1" align="center">
  39.       <form id="userset">
  40.        <table width="90%" border="0" cellpadding="2" cellspacing="0" class="table7">
  41.        <tr>
  42.        <td width="78" height="30" class="table-blue1"><div align="left">用户集</div></td>
  43.        <td colspan="3" class="table-blue2">
  44.              <div align="left">
  45.                    <input type="checkbox" name="u1" value="北京市质量技术监督局领导用户集">北京市质量技术监督局领导用户集<br/>
  46.              <input type="checkbox" name="u1" value="北京市西城区城管执法局高级指挥员用户集">北京市西城区城管执法局高级指挥员用户集<br/>
  47.              <input type="checkbox" name="u1" value="北京市朝阳区环境保护局指挥员用户集">北京市朝阳区环境保护局指挥员用户集<br/>
  48.              </div>
  49.        </td>
  50.        </tr>
  51.        <tr>
  52.        <td>&nbsp;</td>
  53.        <td><div align="left"><input name="choose" type="button" class="input2" value="选择" onclick="send(userset.u1)"></div></td>
  54.        </tr>
  55.        </table>
  56.        </form>
  57.       </div>
  58. </body>
  59. </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+="|";
     }
    }
    用"|"作为多个值的分融符


只有注册用户登录后才能发表评论。
网站导航: