Menu
Hello All,
I am in charge of setting up a intranet web site that displays pricing information. Currently I have a table displaying the below data where the user will look across the top of the top and pick and item, and then look down the left side and pick the second item. Were the point meets is there pricing information. For exampl 4′ 0″ across the top and 3′ 0″ across the left side, they would see that there price is 103. Is there anyway to put this information into a drop down box and after selecting the size it will show the price in a text box?
3′ 0″ 4′ 0″ 5′ 0″
3′ 0″ 90 103 114
4′ 0″ 103 114 126
Any help would be greatly appericated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>price</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
<!--
function cost() {
var price=[
[90, 103, 114],
[103, 114, 126]
];
var f=document.getElementById('form1');
f['price'].value='$ '+price[f['select2'].selectedIndex][f['select1'].selectedIndex];
return false;}
if(document.getElementById) {
window.onload=function() {
document.getElementById('form1').onsubmit=cost;
document.getElementsByName('price')[0].type='text';
document.getElementsByName('price')[0].onfocus=function() {this.blur();};
};
}
//-->
</script>
<style type="text/css">
<!--
-->
</style>
</head>
<body>
<form action="#" id="form1">
<fieldset><legend>Price</legend>
<label>length:<select name="select1">
<option value="3">3' 0"</option>
<option value="4">4' 0"</option>
<option value="5">5' 0"</option>
</select>
</label>
<label>width:<select name="select2">
<option value="3">3' 0"</option>
<option value="4">4' 0"</option>
</select>
</label>
<input type="hidden" name="price" value="0">
<button type="submit">submit</button>
</fieldset>
</form>
</body>
</html>
<input type="hidden" name="price" value="0"><input type="text" name="price" value="" readonly="readonly">f['price'].value='$ '+price[f['select[COLOR=Green]1[/COLOR]'].selectedIndex][f['select[COLOR=Green]2[/COLOR]'].selectedIndex];
Thanks for the help. I have learned a great deal in a short period of time. Can you recommended a good book to learn more about javascript?<i>
</i><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>price</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
<!--
function cost() {
var price=[];
price[0]=[
[70, 83, 94],
[83, 94, 106]
];
price[1]=[
[90, 103, 114],
[103, 114, 126]
];
var f=document.getElementById('form1');
var quality=(f['quality'][0].checked)? 0 : 1;
f['price'].value='$ '+price[quality][f['select1'].selectedIndex][f['select2'].selectedIndex];
return false;}
if(document.getElementById) {
window.onload=function() {
document.getElementById('form1').onsubmit=cost;
document.getElementsByName('price')[0].className='expanded';
document.getElementsByName('price')[0].onfocus=function() {this.blur();};
};
}
//-->
</script>
<style type="text/css">
<!--
.expanded {display:block;}
.collapsed {display:none;}
label {display:block;}
-->
</style>
</head>
<body>
<form action="#" id="form1">
<fieldset><legend>Price</legend>
<label>Class 1<input type="radio" name="quality" checked></label>
<label>Class 2<input type="radio" name="quality"></label>
<label>Combined Drop and Projection:<select name="select2">
<option value="3">3' 0"</option>
<option value="4">4' 0"</option>
<option value="5">5' 0"</option>
</select>
</label>
<label>Width:<select name="select1">
<option value="3">3' 0"</option>
<option value="4">4' 0"</option>
</select>
</label>
<input class="collapsed" type="text" name="price" value="0">
<button type="submit">submit</button>
</fieldset>
</form>
</body>
</html>
Could you please look this code over and see were I am making a mistake out. When you run the code you select class K and it should show you 90, class P should show you 106, class P+10 should show you 117, class P+15 should show you 122, class P+25 should show you 133, and class P+80 should show you 191. I removed allot of the code due to the length. Any help would be greatly appericated.
Thank You<option value="12">12' 0"</option><option value="30">30' 0"</option><option value="12">12' 0"</option><option value="30">30' 0"</option><option value="12">12' 0"</option><option value="30">30' 0"</option><option value="12">12' 0"</option><option value="30">30' 0"</option><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>price</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
<!--
function cost1() {
var price=[];
price[0]=[
[90, 103, 114, 123, 132, 140, 156, 168, 194, 232],
[103, 114, 126, 135, 140, 156, 168, 194, 209, 255],
[346, 387, 401, 477, 489, 510, 582, 610, 653, 682]
];
price[1]=[
[106, 115, 129, 138, 147, 156, 174, 190, 221, 261],
[115, 129, 138, 147, 156, 174, 190, 221, 239, 288],
[403, 436, 468, 501, 541, 580, 619, 654, 689, 722]
];
price[2]=[
[117, 127, 142, 152, 162, 172, 191, 209, 243, 287],
[127, 142, 152, 162, 172, 191, 209, 243, 263, 317],
[443, 480, 515, 551, 595, 638, 681, 719, 758, 794]
];
price[3]=[
[122, 132, 148, 159, 169, 179, 200, 219, 254, 300],
[132, 148, 159, 169, 179, 200, 219, 254, 275, 331],
[463, 501, 538, 576, 622, 667, 712, 752, 792, 830]
];
price[4]=[
[133, 144, 161, 173, 184, 195, 218, 238, 276, 326],
[144, 161, 173, 184, 195, 218, 238, 276, 299, 360],
[504, 545, 585, 626, 676, 725, 774, 818, 861, 903]
];
price[5]=[
[191, 207, 232, 248, 265, 281, 313, 342, 398, 470],
[207, 232, 248, 265, 281, 313, 342, 398, 430, 518],
[725, 785, 842, 902, 974, 1044, 1114, 1177, 1240, 1300]
];
var f=document.getElementById('form1');
f['price1'].value='$'+price[f['select1'].selectedIndex][f['select3'].selectedIndex][f['select2'].selectedIndex];
return false;}
function cost2() {
var price=[
[71, 72, 73, 74, 75, 76, 77, 78, 81],
[72, 73, 74, 75, 76, 78, 79, 80, 83],
[240, 244, 254, 262, 266, 271, 276, 280, 287]
];
var f=document.getElementById('form1');
f['price2'].value='$'+price[f['select4'].selectedIndex][f['select5'].selectedIndex];
return false;}
if(document.getElementById) {
window.onload=function() {
document.getElementById('cost1').onclick=function() {cost1();};
document.getElementById('cost2').onclick=function() {cost2();};
};
}
//-->
</script>
<style type="text/css">
<!--
body {
font-family:Tahoma, Geneva, sans-serif;
font-size:0.8em;
color:#000;
background:#fff;
}
fieldset {
width:719px;
height:50px;
min-height:50px;
}
legend {
font-weight:bold;
color:#f60;
}
form div {
margin-top:5em;
}
-->
</style>
</head>
<body>
<form action="#" id="form1">
<fieldset><legend>cost1</legend>
<label>Class:
<select name="select1">
<option value="K">K</option>
<option value="P">P</option>
<option value="P+10">P+10</option>
<option value="P+15">P+15</option>
<option value="P+25">P+25</option>
<option value="P+80">P+80</option>
</select>
</label>
<label>Combined Drop &amp; Projection:
<select name="select2">
<option value="3">3' 0&quot;</option>
<option value="4">4' 0&quot;</option>
<option value="12">12' 0&quot;</option>
</select>
</label>
<label>Width:
<select name="select3">
<option value="3">3' 0&quot;</option>
<option value="4">4' 0&quot;</option>
<option value="30">30' 0&quot;</option>
</select>
</label>
<input type="text" name="price1" readonly value="" size="10">
<button type="button" id="cost1">cost1</button>
</fieldset>
<i> </i><div>
<i> </i><fieldset><legend>cost2</legend>
<i> </i><label>Combined Drop and Projection:
<i> </i> <select name="select4">
<i> </i> <option value="3">3' 0&quot;</option>
<i> </i> <option value="4">4' 0&quot;</option>
<i> </i> <option value="12">12' 0&quot;</option>
<i> </i> </select>
<i> </i></label>
<i> </i><label>Width:
<i> </i> <select name="select5">
<i> </i> <option value="3">3' 0&quot;</option>
<i> </i> <option value="4">4' 0&quot;</option>
<i> </i> <option value="30">30' 0&quot;</option>
<i> </i> </select>
<i> </i></label>
<i> </i><input type="text" name="price2" readonly value="" size="9">
<i> </i><button type="button" id="cost2">Cost2</button>
<i> </i></fieldset>
<i> </i></div>
</form>
</body>
</html>
[code=html]
var f=document.getElementById('form1');
f['price'].value='$'+price[f['select2'].selectedIndex][f['select3'].selectedIndex][f['select1'].selectedIndex];
return false;}
if(document.getElementById) {
window.onload=function() {
document.getElementById('form1').onsubmit=cost;
document.getElementsByName('price')[0].type='text';
document.getElementsByName('price')[0].onfocus=function() {this.blur();};
[/code]You can't stick two documents together, that doesn't work.[/quote]
0.1.9 — BETA 5.4