js 弹出框返回参数

最新推荐文章于 2023-03-19 13:29:27 发布
最新推荐文章于 2023-03-19 13:29:27 发布
阅读量2.6k 收藏 1
点赞数
分类专栏： 技术文章 文章标签： integer input javascript 手机 border table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaojunhu/article/details/2261231
版权

今天在做一个jsp的页面，然后又弹出一个对话框，并且把输入框的值返回到文本中。具体代码如下：

1  父页面

<% request.setCharacterEncoding ("GBK") ; %>
<% @page contentType="text/html; charset=gb2312" %>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html >
< script  type ="text/javascript" >
function openwindow(){ 
    var temp=  window.showModalDialog("NewBox.jsp",window,"status:no;scroll:no;dialogWidth:235px;dialogHeight:150px");
    if(temp!=undefined)
        document.all.phone_number.value += temp+",";
}             

 </ script >
   < head >
     < title > 欢迎您! </ title >
     < script  language ="Javascript"  src ="/js/validate.js" ></ script >
   </ head >
  
   < body >
     < form  name ="form"  method ="post"  action ="RegisterAction.jsp"  onSubmit ="return Validator.Validate(this,2);" >
     < table  table width ="50%"  border ="1"  align ="center"  cellpadding ="4"  bordercolor ="#C0C0C0"  bordercolorlight ="#C0C0C0"  bordercolordark ="#FFFFFF"  bgcolor ="#EEEEEE" >
       < tr >
         < td  align ="right" > 请输入手机号码： </ td >
         < td  align ="left" >
         < label >< font  size ="3"  color ="red" >
           < input  type ="text"  dataType ="Mobile"  msg ="手机号码不正确"   name ="phone_number"  id ="phone_number" />
         < input  type ="button"  name ="add"  value ="添加"  onclick ="openwindow()" /> &nbsp; * 必填 </ font > &nbsp; [多个号码以“,”分割] </ label >
         </ td >
       </ tr >
       < tr >
         < td  align ="right" > 请输入短信内容： </ td >
         < td  align ="left" >
           < textarea  name ="contents"  cols ="30"  rows ="5" ></ textarea >
         </ td >
       </ tr >
       < tr >
         < td  align ="right" >
         < label >
           < input  type ="submit"  name ="Submit"  value ="提&nbsp;&nbsp;交" />
         </ label >
         </ td >
         < td  align ="left" >        
         < label >
         < input  type ="reset"  name ="Reset"  value ="重&nbsp;&nbsp;置" />
         </ label >
         </ td >
       </ tr >
     </ table >
   </ form >
   </ body >
</ html >

 2  子对话框页面

<% request.setCharacterEncoding ("GBK") ; %>
<% @page contentType="text/html; charset=gb2312" %>
< html >
   < head  >
     < title > 手机号码输入框 </ title >
     < script  language ="Javascript"  src ="/js/validate.js" ></ script >
   </ head >                                 
                   
   < body >
     < FORM  method =post  name =form1  action =""  onSubmit ="return Validator.Validate(this,2);" >
       请输入手机号码: < INPUT  type =text  name =inboxname  dataType ="Mobile"  msg ="手机号码不正确" >< br >
       < INPUT  type ="button"  name =inputboxbt  value =确定  onclick ="window.returnValue=document.all.inboxname.value;window.close();" >
     </ FORM >
   
   </ body >

3  在这里要注意的是，如果弹出的对话框内容比较多涉及到翻页则不能用showModalDialog了，因为里面翻页时会弹出新的页面。所以在这里我又用了window.open()，可是又有新的情况了，就是参数传回来不方便。但网上高手毕竟还是多，今天看到别人的一个例子受到了点启发，现在把我自己写的帖出来，以供大家参考。

mobieList.jsp里的js代码如下：

function  openListwindow()  { 
    window.open("mobieSelect.jsp", 'newwindow', 'height=500, width=700, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
}

mobieList.jsp里的文本代码如下：

< table  table width ="60%"  border ="1"  align ="center"  cellpadding ="4"  bordercolor ="#C0C0C0"  bordercolorlight ="#C0C0C0"  bordercolordark ="#FFFFFF"  bgcolor ="#EEEEEE" >
               < tr >
                 < td  align ="right" > 请输入手机号码： </ td >
                 < td  align ="left" >
                 < label >< font  size ="3"  color ="red" >
                   < input  name ="phnumber"  type ="text"  id ="phnumber"  size ="35" />
                < img  name ="imageField"  src ="/image/mnu_filter.gif"  width ="16"  height ="16"  border ="0"  alt ="添加"   onclick ="openListwindow()" > &nbsp; * 必填 </ font > &nbsp; [多个号码以“,”分割] </ label >
                 </ td >
               </ tr >
               < tr >
                 < td  align ="right" > 请输入短信内容： </ td >
                 < td  align ="left" >
                   < textarea  name ="contents"  cols ="35"  rows ="5" ></ textarea > &nbsp; [200个汉字以内]
                 </ td >
               </ tr >
               < tr >
                 < td  align ="right" >
                 < label >
                   < input  type ="submit"  name ="Submit"  value ="提&nbsp;&nbsp;交" />
                 </ label >
                 </ td >
                 < td  align ="left" >        
                 < label >
                 < input  type ="reset"  name ="Reset"  value ="重&nbsp;&nbsp;置" />
                 </ label >
                 </ td >
               </ tr >
         </ table >

mobieSelect.jsp代码如下：

 

< script  language ="javascript"  type ="text/javascript" >

function getSelect(oSrc){
    var boxes = document.getElementsByName("rowId");   
    var str = "";
    isCheck = isChecked(oSrc);
    if(isCheck == true){
        for (var i = 0; i < boxes.length; i++)   
        {   
            if (boxes[i].checked)   
            {   
                str += boxes[i].value+",";   
            }   
        }
        var str_2 = str.substr(0,str.length-1);
        window.opener.form.phnumber.value = str_2;
        //return str_2;
    }else{
        alert("请选择要发短信的手机号码！");
    }
}

function isChecked(oSrc){
    oSrc = eval(oSrc).rowId;
    if(oSrc!=null)
    {
        for (i=oSrc.length-1;i>=0;i--){
            if (oSrc[i].checked){return true;}
        }
        if (oSrc.checked){return true;}
    }
    return false;
}

 </ script >
< html >
     < head >
         < title > 手机号码选择页面! </ title >
     </ head >
< body >
     < form  name ="handle"  method ="post"  action ="" >
         < table  width ="80%"  border ="1"  align ="center"  cellpadding ="4"  bordercolor ="#C0C0C0"  bordercolorlight ="#C0C0C0"  bordercolordark ="#FFFFFF"  bgcolor ="#EEEEEE" >
             < tr >
               < td  align ="center"   >< font  style ="font-size:16px" > 全 < input  type ="checkbox"  name ="all"  value ="checkbox"   onclick ="chkClick(this , handle)" > 选 </ font ></ td >
               < td  align ="center" >< font  style ="font-size:16px" > 手机号码 </ font ></ td >
               < td  align ="center" >< font  style ="font-size:16px" > 手机用户 </ font ></ td >
             </ tr >
             <%
            //声明分页变量并初始化
            //当前页码值,最小索引值:1
            int pageNo = 1;
            //每页面显示的资讯条数(行数)
            int row = 10;
            //最大显示页数
            int MAX_PAGE_NUM=0;
            //最大每页显示条数
            int MAX_ROWCOUNT=15;
            //总记录数
            int COUNT = 0;
            
            //从请求中获取分页变量的值
            String reqNo=request.getParameter("pageNo");
            String reqRow=request.getParameter("row");
            
            MobieNumberService mns = new MobieNumberService();
            MAX_PAGE_NUM = mns.getPageMobieInfor(row);
            
            if(!StringUtils.isEmpty(reqNo) && NumberUtils.isNumber(reqNo) && Integer.parseInt(reqNo)>1){
                //分页数不超过 MAX_PAGE_NUM 页，若需要超过 MAX_PAGE_NUM 页，则修改 MAX_PAGE_NUM
                if(Integer.parseInt(reqNo)<=MAX_PAGE_NUM)
                    pageNo=Integer.parseInt(reqNo);
                else
                    pageNo=MAX_PAGE_NUM;
            }
            if(!StringUtils.isEmpty(reqRow) && NumberUtils.isNumber(reqRow) && Integer.parseInt(reqRow)>1){
                //每页显示的条目在 MAX_ROWCOUNT 行以内,若需要超过 MAX_ROWCOUNT 行，则修改 MAX_ROWCOUNT
                if(Integer.parseInt(reqRow)<=MAX_ROWCOUNT)
                    row=Integer.parseInt(reqRow);
                else
                    row=MAX_ROWCOUNT;
            }
            
            int startNum=(pageNo - 1) * row;
            /** 以上为翻页程序 **/
            
            List li = new ArrayList();
            try
            {
                li = mns.selectMobieInfor(startNum,row);
                COUNT = mns.getCountMobieInfor();        
            }
            catch(Exception exp) {
                //exp.printStackTrace();
            }
            Iterator it = li.iterator();
            while(it.hasNext()) {
                MobieNumber mn = (MobieNumber) it.next();
              %>
             < tr >
                  < td  align ="center" >< input  type ="checkbox"  name =rowId  value ="<%=mn.getMobie_number()%>" ></ td >
               < td  align ="center" > &nbsp; <% = mn.getMobie_number() %> </ td >
               < td  align ="center" > &nbsp; <% = mn.getMobie_user() %> </ td >
              </ tr >
            <% }  %>
             < tr >
                < td  colspan ="3" >< label >
                  < input  type ="button"  name ="Submit3"  value ="确&nbsp;&nbsp;定"  onclick ="getSelect(handle);window.close();" > &nbsp;&nbsp;
                </ label > &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <%
                    //处理分页链接
                    out.println("共计:"+COUNT+"&nbsp;");    
                    if(pageNo<MAX_PAGE_NUM)
                        out.println("<a href='mobieSelect.jsp?pageNo="+(pageNo+1)+"&amp;row="+row+"'>下页</a>&nbsp;");
                    if(pageNo>1)
                        out.println("<a href='mobieSelect.jsp?pageNo="+(pageNo-1)+"&amp;row="+row+"'>上页</a>&nbsp;");
                    out.println("<a href='mobieSelect.jsp?pageNo=1&amp;row="+row+"'>首页</a>&nbsp;");
                    out.println("<a href='mobieSelect.jsp?pageNo="+MAX_PAGE_NUM+"&amp;row="+row+"'>末页</a>&nbsp;");
                    out.println("第"+pageNo+"/"+MAX_PAGE_NUM+"页<br/>");
              %> </ td >
           </ tr >
         </ table >
     </ form >
</ body >
</ html >
两种方法适合在不同的情况下运用。在此记录下来。算是一点总结吧，呵呵。
小胡同学_SH
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js弹出框选择器
07-01
js弹出框选择器，弹出框中左边是菜单，右边是选择后的内容项
用JS弹出窗口及参数解释
11-30 138
nubar=no, scrollbars=no, resizable=no,location=n o, status=no')         --&gt;         &lt;/SCRIPT&gt;         参数解释：         &lt;SCRIPT LANGUAGE="javascript"&gt;         window.open 弹出新窗口的命令         'index.html' 弹出窗口的文
js弹出确认框，js返回
...
12-02 1606
记点js杂项： 【js弹出确认框】 if(confirm("确定要清空数据吗？")){ } 【js返回】 echo 'alert("暂时没有活动..");history.go(-1);';exit;
用js写出弹出框
吃辣椒的鱼
06-10 397
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
JavaScript 输出与弹框
最新发布
合格程序猿
03-19 337
JavaScript 输出与弹框
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
11-24
本文主要总结了JavaScript中弹出框、对话框和提示框的实现方法，适用于网页动态效果和用户交互设计。 一、JavaScript的三种常见对话框 1. `alert()`：弹出对话框 `alert()`函数用于显示一个带有信息的警告对话框，...
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
10-16
在Web开发中，layer插件是...总之，layer弹出框在进行表单数据修改时，通过合理地使用layer提供的type参数及JavaScript验证函数，可以很好地解决在弹出层中进行数据验证的问题，并确保用户体验的连贯性和数据的准确性。
Js 弹出框口并返回值的两种常用方法
10-28
在弹出窗口中，可以通过设置window.returnValue来返回一个值，返回的值可以通过变量value在父窗口中获取。 这种方法适用于需要显示对话框并返回结果的场景，可以返回简单字符串或数组等类型的数据。然而需要注意的...
JSF中confirm弹出框的用法示例介绍
10-26
在JavaScript Server Faces (JSF) 中，`confirm` 弹出框是一种常见的方式来与用户进行交互，确认他们是否想要执行某项操作。这种功能在网页应用程序中尤其有用，因为它们可以防止用户意外地删除或修改数据。在JSF中...
js弹出框弹出层
08-07
"js弹出框弹出层"是指使用JavaScript实现的一种非模态或者模态的对话框，它可以在页面上创建一个独立的窗口，用来显示内容、进行交互。在本例中，我们关注的是ThickBox，这是一个流行的JavaScript库，专门用于创建...
js函数接受参数并弹出
qq_44254672的博客
05-23 423
<!DOCTYPE html> <html> <head> <title>函数接受参数并弹出</title> <style type="text/css"> *{ margin: 0px; padding: 0px; text-align: center;} ...
JavaScript的三种弹出框
康康Sir的专栏
03-23 2955
列举JavaScript的弹出框
js+css jQuery实现页面后退执行 & 遮罩弹框
weixin_30684743的博客
08-06 92
JS部分 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <script type="text/javascript"> jQuery(document).ready(function ($) { if (window.history &&...
js弹出窗口的三种方式
Ada Dai
11-04 1856
%@LANGUAGE="JAVASCRIPT" CODEPAGE="936"% 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/
js计时事件和弹窗事件（来自于runoob）
月阴荒的博客
05-16 641
通过使用js，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。 在javaScript中使用计时事件是很容易的，两个关键方法是： setInterval ( ) -- 间隔指定的毫秒数不停地执行指定的代码 setTimeout ( ) -- 在指定的毫秒数后执行指定代码 注意: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。 setInterval()方法 setInterval(
js函数返回参数
qq_43029797的博客
02-07 1645
基本写法 直接在方法里return参数，应该就可以了 function test(){ return '我是要被返回的对象，可以是任何类型，包括对象'; } function test2(){ var a = test(); } 注意事项 1、注意方法里面嵌套方法的情况，比如方法2是写在方法1里面，那么方法2返回的参数外面是接收不到的，接收返回参数的变量为表现为’undefined’. 我一般的解决方法是：要返回的参数定义在方法1里，然后方法2对其赋值，方法1进行返回。 很典型的案例就是使用ajax的
JS 函数的返回值及类型 函数的实参可以是任何值 立刻执行函数
broeg的博客
08-01 1479
js 尚硅谷 网课笔记 函数参数的使用及传值
JavaScript函数的参数和返回值
weixin_52370165的博客
08-17 1859
1.形参和实参 在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参， 而在调用函数时，同样也需要传递相应的参数，这些参数被称为实参。 参数 说明 形参 形式上的参数 函数定义的时候传递的参数 当前并不知道是什么 实参 实际上的参数 函数调用的时候传递的参数 实参是传递给形参的 参数的作用: 在函数内部某些值不能固定，我们可以通过参数在调用时传递不同的值进去。 1 . 我们可以利用函数的参数实现函数重复不同的代码 2 .利用函数求任.
微信小程序弹出框操作与示例解析
`wx.showActionSheet` 接收一个对象作为参数，其中 `itemList` 属性是必填的，定义了弹出框中的选项。`success` 和 `fail` 是两个可选的回调函数，分别在用户成功选择或操作失败时执行。`tapIndex` 属性在成功回调中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值