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.