Dynamic ListBoxes Using JavaScript & HTML

Chvrsri
Posted by in JavaScript category on for Beginner level | Points: 150 | Views : 4763 red flag
Rating: 4.5 out of 5  
 4 vote(s)

This is HTML application which is mainly used in e-Commerce applications where the online shopping is done. All the registered users who logs in can access this appliction by selecting the products they wanted. The code might look clumsy but just copy paste and enjoy the article !!!

Introduction


The list boxes are mainly used in e-Commerce applications where there is a need for shopping cart requirement in the web application . So I developed this article to deal with those kind of scenarios using JavaScript.

First I’m  going to share you the html page mockup.

     

This is shopping cart example where a online sports goods shop is selling the accessories related to three different sports like CRICKET,FOOTBALL,VOLLEYBA LL.

There is a button called  ADD TO CART after a particular user clicking it, the functionality is designed such a way that it will add all the accessories which are selected  by the user . That screen is as follows.

 

By this way the selected products are made into the cart. Now the user should be provided with another functionality like , Suppose he wanted to remove the selected products he can select which one to be removed and we can press a button called REMOVE. It will remove the product from that Shopping Cart list.

In the above figure user selected product(Spikes-15$) and if he clicks that REMOVE button it will delete that product .

This is how it can be seen. 

Finally for any e-Commerce application the total of the products in the cart should be displayed for the payment. Now there is another button called TOTAL , where the total of the products is displayed. That can be viewed by this way ::


 

CODE :

This is how the coding part for this application goes . 

<html>

<head>

<title>ITEM SETS</title>

<script language="javascript" type="text/javascript">

function addlist(form1) {

var flag = 0;

var l1 = document.getElementById('cricket');

var l2 = document.getElementById('footbal');

var l3 = document.getElementById('volleyball');

var l4 = document.getElementById('selecteditems');

for (var i = l1.length - 1; i >= 0; i--) {

if (l1.options[i].selected) {

var newcricket = document.createElement('option');

newcricket.text = l1.options[i].text;

newcricket.value = l1.options[i].value;

l4.add(newcricket);

flag = 1;

l1.options[i].selected = false;

}

}

for (var i = l2.length - 1; i >= 0; i--) {

if (l2.options[i].selected) {

var newfootbal = document.createElement('option');

newfootbal.text = l2.options[i].text;

newfootbal.value = l2.options[i].value;

l4.add(newfootbal);

flag = 1;

l2.options[i].selected = false;

}

}

for (var i = l3.length - 1; i >= 0; i--) {

if (l3.options[i].selected) {

var newvolleyball = document.createElement('option');

newvolleyball.text = l3.options[i].text;

newvolleyball.value = l3.options[i].value;

l4.add(newvolleyball);

flag = 1;

l3.options[i].selected = false;

}

}

if (flag == 0)

alert("Cannot Add Without Selection");

}

function remove() {

var flag = 0;

var l4 = document.getElementById('selecteditems');

for (var i = l4.length - 1; i >= 0; i--) {

if (l4.options[i].selected) {

l4.remove(i);

flag = 1;

}

}

if (flag == 0)

alert("Cannot Remove Without Selection");

}

function total() {

var flag = 0;

var tot = parseInt(0);

var l4 = document.getElementById('selecteditems');

for (var i = l4.length - 1; i >= 0; i--) {

tot = tot + parseInt(l4[i].value);

flag = 1;

}

if (flag == 0)

alert("Cart Is Empty");

else {

document.getElementById('t1').value = tot + ' $ ';

}

}

</script>

</head>

<body bgcolor="orange">

<form name="form1">

<table border="2" cell spacing="20" cell padding="20" align="center">

<h1>

<font color="black">ONLINE SPORTS GOODS </font>

</h1>

<marquee><font color="BLUE"> SHOP HERE AND FEEL AMAZED !!!!! </font> </marquee>

<tr>

<td>

<h2>

CRICKET</h2>

</td>

<td>

<h2>

FOOTBAL</h2>

</td>

<td>

<h2>

VOLLEYBALL</h2>

</td>

</tr>

<tr>

<td>

<select id="cricket" multiple="multiple" size="5">

<option value="10">Bat - 10$</option>

<option value="1">Bal - 1$</option>

<option value="7">Pads - 7$</option>

<option value="2">Glouses - 2$</option>

<option value="5">Helmet - 5$</option>

</select>

</td>

<td>

<select id="footbal" multiple="multiple" size="5">

<option value="10">Ball - 10$</option>

<option value="15">Spikes -15$</option>

<option value="20">Trousers - 20$</option>

<option value="10">Glouses - 10$</option>

<option value="10">Helmet - 10$</option>

</select>

</td>

<td>

<select id="volleyball" multiple="multiple" size="5">

<option value="10">Ball - 10$</option>

<option value="15">Spikes - 15$</option>

<option value="20">trousers - 20$</option>

<option value="10">Glouses - 10$</option>

<option value="10">Helmet - 10$</option>

</select>

</td>

</tr>

</table>

<table align="center">

<tr>

<td align="center">

<input type="button" value="ADD TO CART" onclick="addlist(form1)">

</td>

</tr>

<br>

<br>

<br>

<br>

<tr>

<td>

<select id="selecteditems" multiple="multiple" size="5" width="10">

</td>

<td>

<input type="button" value="REMOVE" onclick="remove()">

</td>

</tr>

<tr>

<td align="center">

<br>

<br>

<input type="button" value="TOTAL" onclick="total()">

</td>

<tr>

<td>

<input type="text" id="t1">

</td>

</table>

</form>

</body>

</html>

Conclusion:

Finally this JavaScript and HTML based application very much useful in terms of e-Commerce or online business based application. I feel my article would make a small awareness of how these kind of applications are built.

Note : There could be no database values accessed here. It is just a HTML page that would solve many issues.

Page copy protected against web site content infringement by Copyscape

About the Author

Chvrsri
Full Name: Radha Srikanth
Member Level: Silver
Member Status: Member,Moderator,MVP
Member Since: 10/22/2010 10:05:45 AM
Country: India
Thanks, Radha Srikanth

My self CH V R SRIKANTH having Professional Experience in Developing Desktop, Web based with ASP.NET, C#.NET, ADO.NET, C#, Jquery, Webservices, WCF and Objective C. I generally trade myself as an effective team player with proven strength in problem solving and strong analytical skills. Strong communication, interpersonal, learning and organizing skills matched with the ability to manage the stress, time and people effectively. Capable of working under pressure with willingness to lift sleeves up and get hands dirty on critical technical scenarios

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)