JavaScript Source Code 3000: Forms: Items Popup List
Items Popup List
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. Slick!
(Click "Add Item" to demo this script!)
JavaScript Source Code 3000: Forms: Items Popup List
Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Apple-s). The script is yours!!!
<!-- THREE STEPS TO INSTALL ITEMS POPUP LIST:
1. Paste the first code into a new file, save it as: modify.html
2. Copy the coding into the HEAD of your HTML document
3. Add the last code into the BODY of your HTML document -->
<!-- STEP ONE: Paste the first code into a new file, save it as: modify.html -->
<html>
<head>
<script language="JavaScript">
Begin
<!--
// Add the selected items in the parent by calling method of parent
function addSelectedItemsToParent() {
self.opener.addToParentList(window.document.forms[0].destList);
window.close();
}
// Fill the selcted item list with the items already present in parent.
function fillInitialDestList() {
var destList = window.document.forms[0].destList;
var srcList = self.opener.window.document.forms[0].parentList;
for (var count = destList.options.length - 1; count >= 0; count--) {
destList.options[count] = null;
}
for(var i = 0; i < srcList.options.length; i++) {
if (srcList.options[i] != null)
destList.options[i] = new Option(srcList.options[i].text);
}
}
// Add the selected items from the source to destination list
function addSrcToDestList() {
destList = window.document.forms[0].destList;
srcList = window.document.forms[0].srcList;
var len = destList.length;
for(var i = 0; i < srcList.length; i++) {
if ((srcList.options[i] != null) && (srcList.options[i].selected)) {
//Check if this value already exist in the destList or not
//if not then add it otherwise do not add it.
var found = false;
for(var count = 0; count < len; count++) {
if (destList.options[count] != null) {
if (srcList.options[i].text == destList.options[count].text) {
found = true;
break;
}
}
}
if (found != true) {
destList.options[len] = new Option(srcList.options[i].text);
len++;
}
}
}
}
// Deletes from the destination list.
function deleteFromDestList() {
var destList = window.document.forms[0].destList;
var len = destList.options.length;
for(var i = (len-1); i >= 0; i--) {
if ((destList.options[i] != null) && (destList.options[i].selected == true)) {
destList.options[i] = null;
}
}
}
// End -->
</SCRIPT>
</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
</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>
<!-- STEP TWO: Paste this code into the HEAD of your HTML document -->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Pankaj Mittal (pankajm@writeme.com) -->
<!-- Web Site: http://www.fortunecity.com/lavendar/lavender/21 -->
<! >
<! >
<!-- 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>
</HEAD>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<BODY>
<center>
<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>
</center>
<!-- Script Size: 5.27 KB -->
Wyszukiwarka
Podobne podstrony:
items listshow listtrack listanonymous ftp sites list nl 2anonymous ftp sites list org 7List motywacyjnyBenedykt XVI 2007 07 07 list apostolski Summorum Pontyficum instrlist motywacyjny prosty informacja uzyskana od znajomych215 Język Instruction List Układy sekwencyjne Działania na liczbach materiały wykładowepopupanonymous ftp sites list pl 22806 flash list 070709 Hynix MLC 2Planewięcej podobnych podstron