JavaScript: Forms Script - Items Popup List

Main Forms Script Items Popup List

<!-- 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  -->

<html>

<title>script.omduena.com: JavaScript, java script, javascripts, script, javascript free code!</title>

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>

<tr>

<td bgcolor="#FFFFCC" width="74">Available</td>

<td bgcolor="#FFFFCC" width="69">Selected</td>

</tr>

<tr>

<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>

<input type="button" value=" >> " onClick="javascript:addSrcToDestList()">

</td>

</select>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</body>

</html>

<title>script.omduena.com: JavaScript, java script, javascripts, script, javascript free code!</title>

<!-- 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>

<BODY>

<tr>

<td>

</select>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</center>

<font face="arial, helvetica" size="-2">Free Scripts Sources<br>

by <a href="http://script.omduena.com">The JavaScript Source</a></font>

</center><p>

Click Here if you need help to install the JavaScript

top of page

Free JavaScript Collection