Html 从弹出窗口在父窗口中提交表单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16300117/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Submit form in parent window from popup?
提问by Teiv
I have 2 HTML files like this.
我有 2 个这样的 HTML 文件。
parent.html
父.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
孩子.html
Enter Something Here<br />
<input type='text' name='somethingelse'>
<input type='button' name='submit' value='OK'>
When the user clicks on Submitbutton in parent, a new popup window will show up and ask him to enter something.
当用户点击parent 中的Submit按钮时，会出现一个新的弹出窗口并要求他输入一些内容。
Can anybody please tell me how can I transfer the value of input[somethingelse] from childto input[something] and submit the form in parentafter the user has clicked OK?
谁能告诉我如何将 input[somethingelse] 的值从 child转移到 input[something] 并在用户单击OK后在parent 中提交表单？
回答by T.J. Crowder
You can get a reference to the form in the parent window via window.opener.document, like this:
您可以通过 获取对父窗口中表单的引用window.opener.document，如下所示：
var form = window.opener.document.getElementById("theFormID");
(You'd give the form an ID, although there are other ways to do it.)
（您可以为表单提供一个 ID，但还有其他方法可以做到这一点。）
Then you can access the fields in that form, and of course set their .valueproperty, and you can submit the form via its .submit()function.
然后您可以访问该表单中的字段，当然.value还可以设置它们的属性，您可以通过其.submit()功能提交表单。
But fair warning: Users don't like pop-ups. If there's any way you can just incorporate the other field into the form, I would recommend that instead.
但公平的警告：用户不喜欢弹出窗口。如果有任何方法可以将其他字段合并到表单中，我会建议这样做。
Here's a full example: Live Copy| Source| Source of popup
The main page:
主页面：
<!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>
The popup:
弹出窗口：
<!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>
If you run that, you find that when you click Sendon the main page, it does the popup. If you fill in a value in the popup and click Send Form, the popup disappears and the form is submitted. You can tell the form is submitted with the value because I've used method="GET"and so you can see theField=yourValuein the query string in the URL of the resulting page. For instance, if you type "my value" into the popup, you'll see the URL http://jsbin.com/abiviq/1?theField=my+valuein the main page after the form submit. (But your form presumably uses POSTrather than GET, I'm just using GETto demonstrate.)
如果你运行它，你会发现当你点击Send主页时，它会弹出。如果您在弹出窗口中填写一个值并单击Send Form，则弹出窗口消失并提交表单。您可以告诉表单是使用值提交的，因为我已经使用过method="GET"，因此您可以theField=yourValue在结果页面的 URL 中的查询字符串中看到。例如，如果您在弹出窗口中输入“我的价值”，您将http://jsbin.com/abiviq/1?theField=my+value在提交表单后在主页中看到该 URL 。（但您的表单大概使用POST而不是GET，我只是GET用来演示。）
回答by Four_lo
$('#popupformid').submit(function() {
var myVar = $('#somethingelseid').val();
$('input:text.something').val(myVar);
document.getElementById("formID").submit();
});
