js 弹出框返回参数

最新推荐文章于 2023-03-19 13:29:27 发布

原创最新推荐文章于 2023-03-19 13:29:27 发布 · 2.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#integer #input #javascript #手机 #border #table

技术文章专栏收录该内容

51 篇文章

订阅专栏

本文介绍如何在JSP页面中实现弹出对话框进行手机号输入，并将数据返回到主页面的方法。提供了两种实现方式：使用showModalDialog适用于简单交互；使用window.open结合特定JS处理更复杂的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

1 父页面

<%request.setCharacterEncoding ("GBK") ;%>

<%@page contentType="text/html; charset=gb2312"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

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>

</head>

<body>

<tr>

<td align="right">请输入手机号码：</td>

<input type="button" name="add" value="添加" onclick="openwindow()"/> * 必填</font> [多个号码以“,”分割]</label>

</td>

</tr>

<tr>

<td align="right">请输入短信内容：</td>

</td>

</tr>

<tr>

<label>

</label>

</td>

<label>

</label>

</td>

</tr>

</table>

</form>

</body>

</html>

2 子对话框页面

<%request.setCharacterEncoding ("GBK") ;%>

<%@page contentType="text/html; charset=gb2312"%>

<html>

<head >

<title>手机号码输入框</title>

</head>

<body>

请输入手机号码:<INPUT type=text name=inboxname dataType="Mobile" msg="手机号码不正确"><br>

</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里的文本代码如下：

<tr>

<td align="right">请输入手机号码：</td>

<img name="imageField" src="/image/mnu_filter.gif" width="16" height="16" border="0" alt="添加" onclick="openListwindow()"> * 必填</font> [多个号码以“,”分割]</label>

</td>

</tr>

<tr>

<td align="right">请输入短信内容：</td>

<textarea name="contents" cols="35" rows="5"></textarea> [200个汉字以内]

</td>

</tr>

<tr>

<label>

</label>

</td>

<label>

</label>

</td>

</tr>

</table>

mobieSelect.jsp代码如下：

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>

<tr>

</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>

</tr>

<%} %>

<tr>

</label>                  <%

//处理分页链接

out.println("共计:"+COUNT+" ");

if(pageNo<MAX_PAGE_NUM)

out.println("<a href='mobieSelect.jsp?pageNo="+(pageNo+1)+"&row="+row+"'>下页</a> ");

if(pageNo>1)

out.println("<a href='mobieSelect.jsp?pageNo="+(pageNo-1)+"&row="+row+"'>上页</a> ");

out.println("<a href='mobieSelect.jsp?pageNo=1&row="+row+"'>首页</a> ");

out.println("<a href='mobieSelect.jsp?pageNo="+MAX_PAGE_NUM+"&row="+row+"'>末页</a> ");

out.println("第"+pageNo+"/"+MAX_PAGE_NUM+"页<br/>");

%></td>

</tr>

</table>

</form>

</body>

</html>

两种方法适合在不同的情况下运用。在此记录下来。算是一点总结吧，呵呵。