我有2个像这样的HTML文件.
parent.html
<form method='get' action=''>
<input type='hidden' name='something'>
<input type='button' name='submit' value='Submit' onclick='newwindow=window.open("child.html","popup","height=150,width=200");'>
</form>
child.html
Enter Something Here<br />
<input type='text' name='somethingelse'>
<input type='button' name='submit' value='OK'>
当用户单击父级中的" 提交"按钮时,将显示一个新的弹出窗口并要求他输入内容.
任何人都可以告诉我如何将输入[somethingelse]的值从 child转移到输入[something]并在用户单击OK后在父级中提交表单？
T.J*_*der 11
您可以通过以下方式获取父窗口中对表单的引用window.opener.document:
var form = window.opener.document.getElementById("theFormID");
(您可以为表单提供ID,但还有其他方法可以执行此操作.)
然后,您可以访问该表单中的字段,当然.value还可以设置其属性,您可以通过其.submit()功能提交表单.
但公平警告:用户不喜欢弹出窗口.如果有任何方法可以将其他字段合并到表单中,我建议改为.
这是一个完整的例子:Live Copy | 来源 | 弹出窗口的来源
主页:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<form id="theForm" action="" method="GET">
<input type="text" id="theField" name="theField">
<br><input type="submit" value="Send" onclick="window.open('/urawum/1','','height=400,width=400'); return false;">
</form>
</body>
</html>
弹出窗口:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<p>Please fill in more information:</p>
<input type="text" id="thePopupField">
<br><input type="button" value="Send Form" onclick="doTheSubmit();">
<script>
function doTheSubmit() {
var doc = window.opener.document,
theForm = doc.getElementById("theForm"),
theField = doc.getElementById("theField");
theField.value = document.getElementById("thePopupField").value;
window.close();
theForm.submit();
}
</script>
</body>
</html>
如果您运行它,您会发现当您单击Send主页面时,它会执行弹出窗口.如果您在弹出窗口中填写一个值并单击Send Form,弹出窗口将消失并提交表单.您可以告诉表单是否随值提交,因为我已经使用过method="GET",因此您可以theField=yourValue在结果页面的URL中查看查询字符串.例如,如果您在弹出窗口中键入"我的值",您将http://jsbin.com/abiviq/1?theField=my+value在表单提交后在主页面中看到URL .(但你的形式可能是使用POST而不是GET,我只是GET用来演示.)