<html>
<head>
<title><!--Sample--></title>
<style type="text/css">
<!--
body {
font-family: Arial, Verdana;
font-size: 10pt;
color: #696969;
text-align: left;
}
form span {
display: block;
margin: 25px 0 10px 5px;
font: 700 18px Verdana, Helvetica, Arial, sans-serif;
}
form label {
font: bold 12px Arial;
color: #006;
margin: 5px;
}
-->
</style>
<script type="text/javascript">
<!--
var onlyDigits = /^\d{0,3}$/;
function price( e )
{
e = e ? e : window.event;
t = e.target ? e.target : e.srcElement;
var showPrice = document.getElementsByTagName('label');
tag = document.frm1;
if ( t.name && t.name == 'valueOfA' ) {
if (tag.valueOfA.checked) {
showPrice[0].innerText = '$' + tag.valueOfA.value;
}
else if (!tag.valueOfA.checked) {
showPrice[0].innerText = 'Item A';
}
}
if (t.name && t.name == 'valueOfB') {
if (tag.valueOfB.checked) {
showPrice[1].innerText = '$' + tag.valueOfB.value; }
else if (!tag.valueOfB.checked) {
showPrice[1].innerText = 'Item B';
}
}
}
function addEvents() {
inp = document.getElementsByTagName('input');
for ( var x = 0; x <= 1; x++ ) {
if (document.addEventListener)
inp[x].addEventListener('click',price,false);
else if (document.attachEvent)
inp[x].attachEvent('onclick',price);
else document.onclick = price;
}
}
function validate(thisValue)
{
if ( !onlyDigits.test(thisValue) ) { alert('Only digits from 0-9 and not more than two digits are allowed on this field!'); return false; }
else {
var valA = parseFloat(document.frm1.valueOfA.value) * (document.frm1.a.value*1);
var valB = parseFloat(document.frm1.valueOfB.value) * (document.frm1.b.value*1);
document.frm1.at.value = valA;
document.frm1.bt.value = valB;
document.frm1.total.value = '$' + (valA + valB);
}
}
if (window.addEventListener)
window.addEventListener('load',addEvents,false);
else if (window.attachEvent)
window.attachEvent('onload',addEvents);
else if (document.getElementById)
window.onload = addEvents;
//-->
</script>
</head>
<body>
<form name="frm1" action="javascript:void(0);" onSubmit="return false;">
<span>Product Line</span>
<label>Item A</label> <input type="checkbox" value="1.50" name="valueOfA" /> <label>Item B</label> <input type="checkbox" value="2.00" name="valueOfB" />
<span>Volume Request</span>
<label>A</label>
<input type="text" value="" name="a" size="3" onkeyup="validate(this.value);if (!frm1.valueOfA.checked){alert('You must check (item A) before you can access this field');this.blur();};" /> <label>B</label> <input type="text" value="" name="b" size="3" onkeyup="validate(this.value);if (!frm1.valueOfB.checked){alert('You must check (item B) before you can access this field');this.blur();};" /> <span>Amount Per Item</span>
<label>A</label>
<input type="text" value="" name="at" size="6" /> <label>B</label> <input type="text" value="" name="bt" size="6" />
<span>Overall Amount</span>
<label>A + B</label> <input type="text" name="total" value="$0.00" size="6" />
</form>
</body>
</html>