<!DOCTYPE html>
<html lang=en><head>
<title>Get Checks and ADD</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<style>
body{background:#fed;}
#avail1 {
font-family: serif;
width: 48em;
padding: 5px;
border: 1px dotted #00b;
}
#avail1 input {
background: #99d;
margin-right:25px;
margin-bottom: 38px;
vertical-align: top;
}
#avail1 span {
display: inline-block;
width: 33em;
vertical-align: top;
}
#avail1 button {
margin: 7px 42px;
vertical-align: top;
}
#ordered {
margin-top:3px;
width: 48em;
padding: 5px;
border: 1px dotted #b00;
}
</style>
</head>
<body>
<h3>Get Checks and ADD</h3>
Order Online by Checking the Article below<br />
$10.00 per Article or $25.00 for Three, or $60.00 for all Nine Articles.
<p id="avail1">
<input type="checkbox" /><span>1 Developmental Article Fill More Fill More Fill More Fill More Fill More Fill More Fill More - Vol 5 Number 2, pages 3-7</span><br />
<input type="checkbox" /><span>2 Developmental Article Fill More Fill More Fill More Fill More Fill More Fill More Fill More - Vol 5 Number 2, pages 3-7</span><br />
<input type="checkbox" /><span>3 Developmental Article Fill More Fill More Fill More Fill More Fill More Fill More Fill More - Vol 5 Number 2, pages 3-7</span><br />
<input type="checkbox" /><span>4 Developmental Article Fill More Fill More Fill More Fill More Fill More Fill More Fill More - Vol 5 Number 2, pages 3-7</span><br />
<input type="checkbox" /><span>5 Developmental Article Fill More Fill More Fill More Fill More Fill More Fill More Fill More - Vol 5 Number 2, pages 3-7</span><br />
<input type="checkbox" /><span>6 Developmental Article Fill More Fill More Fill More Fill More Fill More Fill More Fill More - Vol 5 Number 2, pages 3-7</span><br />
<input type="checkbox" /><span>7 Developmental Article Fill More Fill More Fill More Fill More Fill More Fill More Fill More - Vol 5 Number 2, pages 3-7</span><br />
<input type="checkbox" /><span>8 Developmental Article Fill More Fill More Fill More Fill More Fill More Fill More Fill More - Vol 5 Number 2, pages 3-7</span><br />
<input type="checkbox" /><span>9 Developmental Article Fill More Fill More Fill More Fill More Fill More Fill More Fill More - Vol 5 Number 2, pages 3-7</span><br />
<button>ORDER All Articles Checked !</button>
</p>
Cart-
<p id="ordered">
- - -
</p>
<script>
function id2ob(elmtID){return document.getElementById(elmtID);}
id2ob("avail1").getElementsByTagName("button")[0].onclick = function() {//alert("Button Click");
var cks = id2ob("avail1").getElementsByTagName("input"),sns = id2ob("avail1").getElementsByTagName("span"),cart=[],cost=0,out1='';
for (var c=0;c<cks.length;++c) {
if(cks[c].checked) {cart.push(sns[c].innerHTML.substr(0, 23));}
}
if(!cart.length){alert("No Items Checked, NO ORDER"); return}
switch(cart.length) {
case 9: cost=60; break;
case 8: cost=70; break;
case 7: cost=60; break;
case 6: cost=50; break;
case 5: cost=45; break;
case 4: cost=35; break;
case 3: cost=25; break;
case 2: cost=20; break;
case 1: cost=10; break;
default: cost=0;
}
if(!cost){alert("No Items Checked, NO ORDER"); return}
out1 += "<b>Your Total Cost for "+cart.length+" Articles is $"+cost+".00</b><br />Articles Ordered -<p>";
for (c=0;c<cart.length;++c) out1 +=cart[c]+"<br />";
id2ob("ordered").innerHTML = out1;
}
</script></body></html>
Open in new window