Menu
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?
473
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.)
124
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
