[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

Tips: javascript code to let you add form list from child to parent I

 
    
javascript code to let you add form list from child to parent I:



<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
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;
		}
   	}
}
</SCRIPT>
</HEAD>

<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 ('1.html');">
	<INPUT type=button value="Delete Item" onclick="javascript:deleteSelectedItemsFromList (parentList);">
</TD>
</TR>
</TABLE>
</FORM>
</CENTER>

</BODY>
</HTML>





<HTML>
<HEAD>

<SCRIPT language="JavaScript">
// 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;
      	}
	}
}
</SCRIPT>
</HEAD>

<BODY>

<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>
		<OPTION value="2">Item 2</OPTION>
		<OPTION value="3">Item 3</OPTION>
		<OPTION value="4">Item 4</OPTION>
		<OPTION value="5">Item 5</OPTION>
		<OPTION value="6">Item 6</OPTION>
		</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>
Google