Dynamic ListBoxes Using JavaScript & HTML

Chvrsri
Posted by Chvrsri under JavaScript category on | Points: 40 | Views : 5210
HI all this is a Dynamic ListBoxes code sample used in many e-Commerce applications.

The advantage with javascript and html is !!!!!! u can completely copy paste and feel the output...

Very nice na!!! For all the lazy programmers like me!!!



<html>
<head>
<title>ListBox</title>
<script type="text/javascript">




function addcountry(form1)
{
if(document.form1.add1.value=="")
{
alert("TYPE COUNTRY NAME FIRST");
}
else
{
var country=document.getElementById("left1");
var newcountry=document.createElement('option');
newcountry.text=document.form1.add1.value;
newcountry.value=document.form1.add1.value;
country.add(newcountry);
}
}

function addsoap(form1)
{
if(document.form1.add2.value=="")
{
alert("TYPE SOAP NAME FIRST");
}
else
{
var soap=document.getElementById("right1");
var newsoap=document.createElement('option');
newsoap.text=document.form1.add2.value;
newsoap.value=document.form1.add2.value;

soap.add(newsoap);
}
}
function removecountry(form1)
{
var flag=0;
var country=document.getElementById("left1");
for(var i=country.length-1;i>=0;i--)
{
if(document.form1.left1.options[i].selected)
{
country.remove(i);
flag=1;
}
}
if(flag==0)
{
alert(" SELECT ATLEAST ONE COUNTRY TO DELETE");
}
}
function removesoap(form1)
{
var flag=0;
var soap=document.getElementById("right1");
for(var i=soap.length-1;i>=0;i--)
{
if(document.form1.right1.options[i].selected)
{
soap.remove(i);
flag=1;
}
}

if(flag==0)
{
alert(" SELECT ATLEAST ONE SOAP TO DELETE");
}
}

function selectright(form1)
{
var flag=0;
var soap=document.getElementById("right1");
var country=document.getElementById("left1");
for(var i=country.length-1;i>=0;i--)
{
if(document.form1.left1.options[i].selected)
{

var newsoap=document.createElement('option');
newsoap.text=document.form1.left1.options[i].text;
newsoap.value=document.form1.left1.options[i].value;
soap.add(newsoap);
country.remove(i);
flag=1;
}
}
if(flag==0)
{
alert("SELECT ATLEAST ONE COUNTRY TO MOVE");
}

}


function selectleft(form1)
{
var flag=0;
var soap=document.getElementById("right1");
var country=document.getElementById("left1");
for(var i=soap.length-1;i>=0;i--)
{
if(document.form1.right1.options[i].selected)
{
var newcountry=document.createElement('option');
newcountry.text=document.form1.right1.options[i].text;
newcountry.value=document.form1.right1.options[i].value;
country.add(newcountry);
soap.remove(i);
flag=1;
}
}

if(flag==0)
{
alert("SELECT ATLEAST ONE SOAP TO MOVE");
}
}


function allright(form1)
{

if(document.form1.left1.length=="")
{
alert("SELECTED LIST IS EMPTY");
}
else
{
var country=document.getElementById("left1");
var soap=document.getElementById("right1");
for(var i=country.length-1;i>=0;i--)
{
var newsoap=document.createElement('option');
newsoap.text=document.form1.left1.options[i].text;
newsoap.value=document.form1.left1.options[i].value;
soap.add(newsoap);
country.remove(i);
}
}


}


function allleft(form1)
{
if(document.form1.right1.length=="")
{
alert("SELECTED LIST IS EMPTY");
}
else
{
var country=document.getElementById("left1");
var soap=document.getElementById("right1");
for(var i=soap.length-1;i>=0;i--)
{
var newcountry=document.createElement('option');
newcountry.text=document.form1.right1.options[i].text;
newcountry.value=document.form1.right1.options[i].value;
country.add(newcountry);
soap.remove(i);
}
}

}

</script>
</head>
<form name="form1">
<body bgcolor="ORANGE">
<center><h2>LIST ITEMS</h2></Center>

<table align="center">

<tr>
<td><input type=text name="add" id="add1" size=15>
<input type=button value="ADD Country" onclick="addcountry(form1)"></td>
<td><input type=button value="REMOVECountry" onclick="removecountry(form1)" ></td>
<td><input type=button value="ADD soap" onclick="addsoap(form1)" ></td>
<td><input type=button value="REMOVE Soap" onclick="removesoap(form1)">
<input type=text name="add" id="add2" size=15></td>
</tr>

<tr>
<td><select id="left1" size="10" multiple>
<option id="India">India</Option>
<option id="South Africa">South Africa</Option>
<option id="China">China</Option>
<option id="US">Us</Option>
<option id="UK">Uk</Option>
<option id="Brazil">Brazil</Option>
</select></td>

<td align="center">
<input type="button" value=">>" onclick="allright(form1)">


<br>
<input type="button" value=">" onClick="selectright(form1)">


<br>
<input type="button" value="<<" onclick="allleft(form1)">

<br>
<input type="button" value="<" onClick="selectleft(form1)">

</td>


<td align="right"><select id="right1" size="10" multiple>
<option id="Liril">Liril</Option>
<option id="cinthol">cinthol</Option>
<option id="Lux">Lux</Option>
<option id="camay">camay</Option>
<option id="Mysore Sandal">Mysore Sandal</Option>
<option id="Lifeboy">Lifeboy</Option>
</select></td>


</tr>
</table>
</form>
</body>
</html>


Conclusion :


Many feel that this is very easy but the realistic scenario is not that easy !!!!

Comments or Responses

Login to post response