js 弹出窗口 选值后提交回父级页(不刷新)的文本框

在父级页 设置两个 文本框 id 和 name和 一个弹出窗口按钮

在弹出窗口中列出若干条记录,现需要将任意一条记录点击提交。将该条记录的 id 和 name 字段 返回到父级对应的文本框中。不刷新父级页面。

请问应该怎么写。谢谢

父窗口代码(parent.html)

<!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>
<title>Untitled Page</title>
</head>
<body>
<input type="text" name="data_key" id="data_key" />
<input type="text" name="data_value" id="data_value" />
<input type="button" id="open_child_window" value="list_datas"/>
<script type="text/javascript">
window.onload = function(){
//取得打开子窗口的按钮
var openChildBtn = document.getElementById("open_child_window");
//打开新窗口函数
function openNewWindow(url){
window.open(url);
}
//调用打开新窗口函数,指定新窗口地址
function openChildWindow(){
openNewWindow("child.html");
}
//为按钮绑定事件
if (document.all) {
openChildBtn.attachEvent("onclick",openChildWindow);//IE
}else{
openChildBtn.addEventListener("click",openChildWindow);//非IE
}
}
</script>
</body>
</html>

子窗口代码(child.html)这个必须按这个命名,如果要改,需要把父窗口代码里面的child.html也同步改掉

<!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>
<title>Untitled Page</title>
<style type="text/css">
body{font-size:12px}
.data_list{background:#ddf}
.data_list td{background:white}
</style>
</head>
<body>
<table cellspacing="1" cellpadding="3" border="0" class="data_list">
<tr>
<td id="data_key_1">data_key_1</td>
<td id="data_value_1">data_value_1</td>
<td><input type="button" id="data_submitor_1" value="submit"/></td>
</tr>
<tr>
<td id="data_key_2">data_key_2</td>
<td id="data_value_2">data_value_2</td>
<td><input type="button" id="data_submitor_2" value="submit"/></td>
</tr>
<tr>
<td id="data_key_3">data_key_3</td>
<td id="data_value_3">data_value_3</td>
<td><input type="button" id="data_submitor_3" value="submit"/></td>
</tr>
<tr>
<td id="data_key_4">data_key_4</td>
<td id="data_value_4">data_value_4</td>
<td><input type="button" id="data_submitor_4" value="submit"/></td>
</tr>
</table>
<script type="text/javascript">
//向父窗口发送数据
function SendDataToParent(key,value){
if (window.opener && window.opener.document.getElementById("data_key")&& window.opener.document.getElementById("data_value")) {
window.opener.document.getElementById("data_key").value = key;
window.opener.document.getElementById("data_value").value = value;
}
}
window.onload = function(){
//如果父窗口已经被关闭或者不存在,直接返回
if (!window.opener) return ;
//遍历所有的数据
for(var i=1;i<5;++i){
//取得提交按钮
var btn = document.getElementById("data_submitor_" + i.toString());
//如果按钮有效
if (btn) {
//为按钮绑定事件
if(document.all){//IE
//attachEvent响应函数中this指针是指向window而不是指向事件响应对象的,所以需要一个函数来实现对象传递
function GetEventHandle(tag) {
return function () {
var temp = tag.id.split("_");
var index = temp[temp.length-1];
SendDataToParent(document.getElementById("data_key_"+index).innerHTML,document.getElementById("data_value_"+index).innerHTML);
}
}
btn.attachEvent("onclick",GetEventHandle(btn));
}else{//非IE
btn.addEventListener("click",function(){
var temp = this.id.split("_");
var index = temp[temp.length-1];
SendDataToParent(document.getElementById("data_key_"+index).innerHTML,document.getElementById("data_value_"+index).innerHTML);
});
}
}
}
}
</script>
</body>
</html>

我都写了注释的,如果还不清楚就补充问题
温馨提示:内容为网友见解,仅供参考
第1个回答  2010-01-12
父窗口代码:(命名随意)
<!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=utf-8" />
<title>无标题文档</title>
<script language="javascript">
var child;
function onClick () {
window.open('childwindow.html');
}
function setData (id, name) {
document.getElementById('id').value = id;
document.getElementById('name').value = name;
}
</script>
</head>

<body>
<p>id:<input type="text" id="id"/></p>
<p>name:<input type="text" id="name" /></p>
<p><input type="button" value="弹出" onclick="onClick();" /></p>
</body>
</html>

子窗口代码:(childwindow.html)
<!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=utf-8" />
<title>无标题文档</title>
</head>

<body>
<table border="1">
<tr onclick="opener.setData(this.childNodes[0].innerHTML, this.childNodes[1].innerHTML);window.close();"><th>id</th><th>name</th></tr>
<tr onclick="opener.setData(this.childNodes[0].innerHTML, this.childNodes[1].innerHTML);window.close();"><td>1</td><td>Tony</td></tr>
<tr onclick="opener.setData(this.childNodes[0].innerHTML, this.childNodes[1].innerHTML);window.close();"><td>2</td><td>Lily</td></tr>
<tr onclick="opener.setData(this.childNodes[0].innerHTML, this.childNodes[1].innerHTML);window.close();"><td>3</td><td>John</td></tr>
</table>
</body>
</html>

// 多浏览器下测试通过
// 条目获取也可以不通过URL 如果有需求我可以写一个AJAX版本本回答被提问者采纳
第2个回答  2010-01-13
父页面的打开新窗口的方法
document.getElementById(“id”).value是获取你文本框的值,用新窗口返回的值赋给它

document.getElementById(“id”).value=window.showModalDialog("show.jsp");

新窗口的方法
window.returnValue=在新窗口中所获得的的name和id 的值
第3个回答  2010-01-12
这很简单呀。。在子页面上给父页面的设值就行呀。。
如父页面<input id='metext' value="" />
子页面js执行:
window.parent.document.getElementById('metext' ).value="我要给你的值"
//这个值自己从这个页面拿就好了
第4个回答  2010-01-12
基本就是1句话

点击触发事件
父窗口ID为XX的对象赋值为name是YY的值
window.parent.document.getElementById('xx').value = document.getElementsByName('YY').value;

js 弹出窗口 选值后提交回父级页(不刷新)的文本框
window.onload = function(){ \/\/如果父窗口已经被关闭或者不存在,直接返回 if (!window.opener) return ;\/\/遍历所有的数据 for(var i=1;i<5;++i){ \/\/取得提交按钮

php js弹出窗口 选择产品后返回值到父级页面不刷新
如果你希望提交B页面的数据成功,并且A界面可以即时显示的话,做一个 setInterval() 方法就可以了,每隔几秒做一次ajax返回,找到相应的值,不用刷新也可以实现。当然一般不是很推荐,毕竟ajax 会每隔一个时间请求一次,所以请求返回的json尽量不要太大.

利用ajax将弹出窗口中选定的内容返回到已经打开的父窗口的文本框
1.子窗口使用div控制,此时,search需要用ajax,你可以用js随意调用和赋值,这种方式实现你的返回内容功能比较方便,但是对于设计子窗口可能比较麻烦。2.子窗口是iframe,此时,你用在你的父窗口定义一个函数直接量(当全局变量理解也行)var iframetext_fun = function(xx){ \/\/do something \/\/赋值 \/\/...

...子画面向父级画面传值并返回父画面(幅画面不刷新)
第一参数通常设置为空字符串,例如 window.open("", parentWindow.name),这是因为如果传递的是父窗口的路径,会导致父窗口刷新。第二参数应与父窗口设置的 window.name 保持一致,否则会打开一个新的空白页面。

JS在文本框中输入数据后,自动计算总合,并且不刷新页面的代码
总分: 已选: 还剩:

...不刷新页面就可以将变量值显示在同一页面的文本框中?
要通过事件才可以.下面是一个测试 div的值 function test(){ var value = "";value = document.getElementById('testDiv').innerHTML; \/\/计算出来的值 document.all.testTemp.value = value;}

...选中单选框 然后点击 按钮 把选中的值 传到文本框里。。
asp php ajaxvar radio = document.getElementById("radio").getElementsByTagName("input");var text = document.getElementById("text");var submit = document.getElementById("submit");submit.onclick = function(){ for(var i=...

js弹出窗口 + 获取上传文件全路径。想点击“导入”可以能弹出这个文本...
本文的地址是: function MM_findObj(n, d) { \/\/v4.0 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x...

如何用JS保留提交表单后的value值
你这情况应该是提交动作会postback到后台处理是吧。 页面刷新后 文本框中的内容就都没有了。这种情况有两种方式解决:1. 用后台代码: 服务端代码 变量来保存这些值 举个c#的例子。<input type="text" value="<%= entity.time%>" id="date"\/> 在执行提交前, 给entity这个实体赋值, 这样就...

...怎样清空该行的其他text文本框的值 ,不要刷新页面
使用jQuery吧!("div:contains('John') ~ input") .text("");

相似回答