choose your optiions inside a form

I have a page that lists a list of the options a user might want to apply to his order. However, the client doesn't want to put these options on the main form, instead he would like the user to click on a link for "add/edit" and have a small box open above the page with all the options in it. Then when the user has selected his preferred option, click "okay" and it returns to the form and updates the list of selected options.

Easy to describe, hard to search on. Has anyone seen anything like this? Preferably something that can be understood by a relative neophyte like myself.

================
This is a more detailed explanation of what is happening....

Here is what i have developed so far:

Code:

---

<a href="##" onClick="return overlay(this, 'subcontent1', 'top')">Add / Edit Options</a><br />
<<list of options>>
<DIV id="subcontent1" style="position:absolute; border: 1px solid silver;  width: 500px; padding: 0px; display:none; z-index:1000" class="odd">
        <iframe src="myoptionsbox.cfm?id=#url.id#&field=Condition&box=subcontent1" width="500"  height="250" scrolling="no" frameborder="0"></iframe>
</DIV>

---

The code in myoptions.cfm executes a "<form action="updateOptions.cfm" method="post"></form> when the user clicks on the submit.

"updateOptions.cfm" updates the database and then executes:

Code:

---

<script language="javascript">
        parent.location.reload();
</script>

---

This works just fine on the Keyepad xsl (a hand-held tablet device), but not so fine on Firebox on my desktop.

================

What i would like is some Javascript that creates the overlay box, and then when done, executes some code then returns to where I started. The more i work on this the more discouraged I am getting. Can any one show me some light in my tunnel?