Secondary form that populates a main form
Let’s say you have some optional items to your form. (Maybe extra address info) and your form is long enough as it is. You can pop up a secondary form, where the user can enter their extra info, and have it saved to the main form and submitted with the main form. (see example here)
Add this link on the page in your main form:
<a href=”#” onClick=”window.open(’newform.htm’,'addresses’,’scrollbars=yes, resizable=yes, width=400, height=650′)”>add more addresses</a>
you’ll also need hidden fields to store the data that will be entered in the popup form:
<input type=”hidden” name=”address2″ value=”">
<input type=”hidden” name=”city2″ value=”">
<input type=”hidden” name=”state2″ value=”">
<input type=”hidden” name=”zip2″ value=”">
<input type=”hidden” name=”address3″ value=”">
<input type=”hidden” name=”city3″ value=”">
<input type=”hidden” name=”state3″ value=”">
<input type=”hidden” name=”zip3″ value=”">
Then, the pop up form gets two javascript functions on the top of the page. One that loads any data previously entered. One that “saves” the data when the “save” button is clicked on that page.
<script type=”text/javascript”>
function storeAddresses(newform) {
self.opener.document.forms[0].address2.value = newform.address2.value;
self.opener.document.forms[0].city2.value = newform.city2.value;
self.opener.document.forms[0].state2.value = newform.state2.value;
self.opener.document.forms[0].zip2.value = newform.zip2.value;
self.opener.document.forms[0].address3.value = newform.address3.value;
self.opener.document.forms[0].city3.value = newform.city3.value;
self.opener.document.forms[0].state3.value = newform.state3.value;
self.opener.document.forms[0].zip3.value = newform.zip3.value;
self.close();
}
function loadAddresses() {
var newform = document.forms[0];
newform.address2.value = self.opener.document.forms[0].address2.value;
newform.city2.value = self.opener.document.forms[0].city2.value;
newform.state2.value = self.opener.document.forms[0].state2.value;
newform.zip2.value = self.opener.document.forms[0].zip2.value;
newform.address3.value = self.opener.document.forms[0].address3.value;
newform.city3.value = self.opener.document.forms[0].city3.value;
newform.state3.value = self.opener.document.forms[0].state3.value;
newform.zip3.value = self.opener.document.forms[0].zip3.value;
}
</script>
in your body tag include this:
<body onload=”loadAddresses();”>
your form tag looks like this (no method or action attributes neccessary):
<form name=”newform”>
and your submit button looks like this:
<input type=”button” name=”store” value=”Store Addresses” onclick=”storeAddresses(document.newform)”>
That’s it. Check out the example - you’ll notice you can enter in data in the pop up form, and it’s remembered if you click the link again. And if you hit submit on the main form, you’ll see that all the data is sent together
If you’re one of those “javascript hating people”, yes, I’m already aware this wouldn’t work if you didn’t have javascript running on your machine. But it DOES work in IE, Mozilla, even Netscape 4.7!! So, 
August 28th, 2003 at 9:41 pm
It’s very useful your example. Now I am trying to do this.
A page has listbox with two options. Then I open a pop up window with another listbox with many options. What I want is to fill the firts listbox with the opction selected in the second list in the pop up window. I am doing like this..
Origen=document.frmsegundo.cmbCiudades;
Destino=opener.document.frmprueba.cbmultiple;
Destino.options[2]=new Option(Origen.options[0].text,Origen.options[0].value);
but I got this error:
The server throw an Exception.
Could you help me please!!! I will thank you a lot!!
May 5th, 2004 at 2:51 pm
I’m having the same problem.
Did you solve it?