Geek Answers Handbook

Submit form in parent window from popup?

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 the Submit button in the parent , a new popup will appear and ask him to enter something.

Can someone tell me how I can pass the input value of [somethingelse] from the child , to enter [something] and send the form to the parent after the user clicked OK

+4
source share
2 answers

You can get a link to the form in the parent window through window.opener.document , for example:

 var form = window.opener.document.getElementById("theFormID");

(You must provide an ID form, although there are other ways to do this.)

Then you can access the fields in this form and, of course, set their .value property, and you can submit the form through its .submit() function.

But a fair warning: users do not like pop-ups. If you can in any way include another field in the form, I would recommend this instead.

Here is a complete example: Live Copy | Source | Popup Source

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>

Pop-up window:

 <!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 this, you will find that when you click the Send button, a pop-up window appears on the main page. If you fill in the value in the popup window and click Send Form , the popup will disappear and the form will be sent. You can indicate that the form is submitted with a value because I used method="GET" , and so you can see theField=yourValue in the query string in the URL of the resulting page. For example, if you enter "my value" in the pop-up window, you will see the URL http://jsbin.com/abiviq/1?theField=my+value on the main page after submitting the form. (But your form apparently uses POST , not GET , I just use GET for demonstration.)

+10
source 
  $('#popupformid').submit(function() { var myVar = $('#somethingelseid').val(); $('input:text.something').val(myVar); document.getElementById("formID").submit(); });
0
source

More articles:


All Articles