Today is . Page created 10/28/06

Popup Items Popup Form List Forms

(Click "Add Item" to demo this script!)

If you have several items for the user to pick from, you may notice that your page can quickly becomes cluttered. This script helps solve that problem by opening a new window when the user wants to add items to the list. The new window displays the items and passes the selected item information back to the list in the main window.

We have tested the code in IE6.0, Firefox1.5.0.7, Opera9.02, Netscape8.1 and AOL Explorer1.2. This script worked well in all platforms with no variations observed.

For Your Information For your Information:     Before we begin, we feel obligated to advise you that the above form is for all intensive purposes a "Stand Alone" script. In other words, it really does not do much of anything other than what you see. In order to make it function as designed, you need to incorporate it into a valid working form. If you do not have a good Solid Knowledge of HTML coding, javascripts, forms and reconfigurations, please "Do Not Attempt" this until you are Proficient in the aforementioned areas.

Depending on your knowledge of HTML, javascripts and forms, this is an easy three (3) part copy and paste code that goes in both the <HEAD> section and incorporate the <BODY> section into a functional form. You must also make a new document and paste that coding as a complete HTML document. This coding is for the little popup window that will appear.

In all actuality, there are really no reconfigurations other than possibly a few for cosmetic purposes. See below where and howto:

<!---- Reconfigurations <HEAD> Section-Main Document ---->

<!-- Begin
function small_window(myurl) {
var newWindow;
var props
= 'scrollBars=yes,resizable=yes,toolbar=no,menubar=no,location=no,
directories=no,width=300,height=200';
newWindow = window.open(myurl, "Add_from_Src_to_Dest", props);

Note Of Importance Note Of Importance:     the height and width attributes are self-explanatory. The other attributes to have visible use yes, to not be visible use no.

<!---- Reconfigurations <BODY> Section-Main Document* ---->

* This refers to the document that the effect itself will be incorporated into a valid form

<center>
<form method=post>
<table border=1 bgcolor="#ffffcc">
<tr>
<td>
<select size=5 name=parentList multiple>
</select>

<table border=1 is how wide a border you want to surround the form. The bigger the number, the wider the border.
bgcolor="#ffffcc"> This denotes what color the face or background of the form will be.


<select size=5 denotes how many selections will be visible in the textarea form.

This is set for the default <select size=5

This is set for <select size=8

The above is all personal preference and how many items are required to be seen without scrolling.

The next section of reconfigurations are in the code for the little popup window. (This is the code you paste as a complete HTML document into a new document you make and name "modify.html". These reconfigurations again are cosmetic and are done in the <BODY> section of the new document.

<!---- Reconfigurations <BODY> Section-New Document ---->

</head>
<body onLoad="javascript:fillInitialDestList();">
<center>
<form method="POST">
<table bgcolor="#FFFFCC">
<tr>
<td bgcolor="#FFFFCC" width="74">Available</td>
<td bgcolor="#FFFFCC"> </td>
<td bgcolor="#FFFFCC" width="69">Selected</td>
</tr>
<tr>
<td bgcolor="#FFFFCC" width="85">
<select size="6" name="srcList" multiple>
<option value="1">Item 1
<option value="2">Item 2
<option value="3">Item 3
<option value="4">Item 4
<option value="5">Item 5
<option value="6">Item 6
 		This is the part you should be most concerned with. This is where you will be adding your selections. To add more, just follow the pattern. The colors are set the same as the colors on the main page ( FFFFCC ) where the form is visible.
The <select size="6" is how many items will be visible without scrolling
</select>
</td>
<td bgcolor="#FFFFCC" width="74" align="center">
<input type="button" value=" >> " onClick="javascript:addSrcToDestList()">
<br><br>
<input type="button" value=" << " onclick="javascript:deleteFromDestList();">
</td>
<td bgcolor="#FFFFCC" width="69">
<select size="6" name="destList" multiple>
</select>
</td>
</tr>
<tr>
<td colspan=3 align="center">
<input type="button" value="Done" onClick = "javascript:addSelectedItemsToParent()">
</td>
</tr>
</table>
</form>
</body>
</html>

For Your Information For your Information:     The last thing you will need to do is incorporate the effect into a working form. Remember, this effect on the page the working form is located will be added into two parts of the document:

  1. <HEAD> section
  2. <BODY> section directly into the form itself

On A Final Note    When you are in the process of editing this effect and if you have an editor like "Angelfire" when you "Preview" from editing the little popup window will not work corectly. You will get the eror mesasage on the popup page of "Actually, we couldn't find the page you requested. Please check the URL". To view it and have it function correctly, you must have the page itself up and not from the editor. If this is a little unclear, see the two below links and it should totally clarify it.
[ Right Way ]     [ Wrong Way ]

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ]   [ Rate This Page ]