scriptygoddess

10 Jun, 2003

Secondary form that populates a main form

Posted by: Jennifer In: Script snippet

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,