从弹出窗口提交父窗口中的表单？ [英] Submit form in parent window from popup?
问题描述
我有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
在此输入东西< br />
< input type ='text'name ='somethingelse'>
< input type ='button'name ='submit'value ='OK'>
当用户点击父按钮时， strong>，会出现一个新的弹出窗口并要求他输入内容。 有谁能告诉我如何将输入值[somethingelse]从$在用户点击确定之后，
window.opener.document 获得对父窗口中表单的引用，你可以通过 window.opener.document 像这样：
var form = window.opener.document.getElementById（theFormID）;
（尽管还有其他方法可以让表单成为ID。）
然后你可以访问这个表单中的字段，当然也可以设置它们的 .value 属性，你可以提交通过它的 .submit（）函数。
但是公正的警告：用户不喜欢弹出窗口。如果您有任何方法可以将其他字段合并到表单中，我会建议您改用它。
主页：
<！DOCTYPE html>
< html>
< head>
< meta charset = utf-8 />
< title> JS Bin< / title>
< / head>
< body>
< form id =theFormaction =method =GET>
< input type =textid =theFieldname =theField>
< br>< input type =submitvalue =Sendonclick =window.open（'/ urawum / 1'，''，'height = 400，width = 400'）; return假;>
< / form>
< / body>
< / html>
弹出窗口：
<！DOCTYPE html>
< html>
< head>
< meta charset = utf-8 />
< title> JS Bin< / title>
< / head>
< body>
< p>请填写更多信息：< / p>
< input type =textid =thePopupField>
< br>< input type =buttonvalue =发送表单onclick =doTheSubmit（）;>
< script>
函数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>
如果运行该命令，您会发现当您单击发送在主页面上，它弹出。如果您在弹出窗口中填入一个值并点击发送表格，弹出窗口消失并提交表格。你可以通过使用 method =GET来判断表单是否提交了值，所以你可以看到 theField = yourValue 在结果页面的URL中的查询字符串中。例如，如果您在弹出窗口中输入my value，则会看到URL http://jsbin.com/abiviq/1?theField=my+value 在表单提交后的主页面中。 （但你的表单可能使用 POST 而不是 GET ，我只是使用 GET 来演示。）
I have 2 HTML files like this.
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'>
When the user clicks on Submit button in parent, a new popup window will show up and ask him to enter something.
Can anybody please tell me how can I transfer the value of input[somethingelse] from child to input[something] and submit the form in parent after the user has clicked OK?
You can get a reference to the form in the parent window via window.opener.document, like this:
var form = window.opener.document.getElementById("theFormID");
(You'd give the form an ID, although there are other ways to do it.)
Then you can access the fields in that form, and of course set their .value property, and you can submit the form via its .submit() function.
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 Send on 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=yourValue in 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+value in the main page after the form submit. (But your form presumably uses POST rather than GET, I'm just using GET to demonstrate.)
这篇关于从弹出窗口提交父窗口中的表单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
