« »

If you have several items for the user to pick from, you may notice that your page can quickly becomes cluttered. This JavaScript 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. Slick!

Label: Items Popup List script

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<SCRIPT LANGUAGE="JavaScript">
// Pankaj Mittal (pankajm@writeme.com)

<!-- 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);
}
// Adds the list of selected items selected in the child
// window to its list. It is called by child window to do so.  
function addToParentList(sourceList) {
destinationList = window.document.forms[0].parentList;
for(var count = destinationList.options.length - 1; count >= 0; count--) {
destinationList.options[count] = null;
}
for(var i = 0; i < sourceList.options.length; i++) {
if (sourceList.options[i] != null)
destinationList.options[i] = new Option(sourceList.options[i].text, sourceList.options[i].value );
   }
}
// Marks all the items as selected for the submit button.  
function selectList(sourceList) {
sourceList = window.document.forms[0].parentList;
for(var i = 0; i < sourceList.options.length; i++) {
if (sourceList.options[i] != null)
sourceList.options[i].selected = true;
}
return true;
}

// Deletes the selected items of supplied list.
function deleteSelectedItemsFromList(sourceList) {
var maxCnt = sourceList.options.length;
for(var i = maxCnt - 1; i >= 0; i--) {
if ((sourceList.options[i] != null) && (sourceList.options[i].selected == true)) {
sourceList.options[i] = null;
      }
   }
}
//  End -->
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<form method=post>
<table border=1 bgcolor="#ffffcc">
<tr>
<td>
<select size=5 name=parentList multiple>
</select>
</td>
</tr>
<tr>
<td align=center>
<input type=button value="Add Item" onclick = "javascript:small_window('modify.html');">
<input type=button value="Delete Item" onclick = "javascript:deleteSelectedItemsFromList(parentList);">
</td>
</tr>
</table>
</form>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->