...

View Full Version : PC Building Form



DragonXXIV
12-22-2005, 10:32 PM
I'm trying to build a PC building form using drop-down menus. I want to use the values of each option in the menu and add them together to get the total price, then display the total price somewhere on the page.

Help will be extremely apprecciated.

DragonXXIV
12-22-2005, 11:00 PM
I really need to get this finished ASAP. Please, someone help.

Basscyst
12-23-2005, 02:28 AM
Believe it or not I actually had this laying around in another post. Be aware, this is not something you could normally just post about, with no code and have someone make for you, it is pretty involved. So happens you got lucky this time. :D



<html>
<head>
<title>PC Builder</title>
<style type="text/css">
#tbl1
{
width:450px;
text-align:left;
}

select
{
width:450px;
}

#drive2
{
width:450px;
}

.hdr
{
background-color:#B0C4DE;
font-weight:bold;
}

th
{
text-align:center;
background-color:#000;
color:#FFF;
}

tfoot td
{
text-align:center;
background-color:#000;
color:#FFF;
}

#spot1
{
display:none;
}

#spot2
{
display:none;
}

#config
{
font-size:1em;
font-style:italic;
}

#container
{
text-align:center;
height:100%;
width:100%;
}

#thumbnail
{
position:relative;
top:10px;
width:176px;
height:232px;
float:left;
}

#imgc
{
float:left;
}

td
{
border:solid 1px;
}

.total
{
font-weight:bold;
}

#table2
{
float:left;
}

#msg
{
color:red;
font size:.80em;
font-style:italic;
}
</style>
<script type="text/javascript">

//-----------------------------Edit Default Selections & Price Below----------------------------------------------
var defaults=new Array()
defaults[0]=new Array('NZXT Gaming Case w/400 Watt PSU - Blue [$135]',135); //default case
defaults[1]=new Array('Some Motherboard (RAID) [$170]',100); //default mother board
defaults[2]=new Array('Aspire Black Triple Fan 520w Aluminum PSU [$40]',40); //default power supply
defaults[3]=new Array('AMD Athlon 64 3200+ 512KB L2 Cache 2.2GHZ CPU [$250]',250); //default cpu
defaults[4]=new Array('512MB (2 x 256) PC3200 Memory Corsair XMS Extreme Series [$199]',199); //default memory
defaults[5]=new Array('(Serial ATA) 80GB 7200RPM 8MB Cache SATA-150 [$95]',95); //default drive1
defaults[6]=new Array('None Selected',0); //default drive2
defaults[7]=new Array('Printer2 [$45]',45); //default drive2
//-----------------------------------------------------------------------------------------------------------------

function isRaid()
{
var obj=document.getElementById('mb').options[document.getElementById('mb').selectedIndex]; //Case
var chkraid=obj.text.indexOf('RAID'); //check if raid
stat=1;
if(chkraid!=-1) //if raid
{
document.getElementById('msg').innerHTML="Raid requires two identical drives.";
//alert user that 2 hard drives are needed
dupDrive();
}
else
{
dupDrive();
}
}

function dupDrive()
{
var obj=new Array(); //set object array
obj[0]=document.getElementById('mb').options[document.getElementById('mb').selectedIndex]; //motherboard
obj[1]=document.getElementById('drive').options[document.getElementById('drive').selectedIndex]; //Hard Drive
obj[2]=document.getElementById('hd2'); //Second Drive Spot
obj[3]=document.getElementById('hd2head'); //Second Drive Header
obj[4]=document.getElementById('spot1');
obj[5]=document.getElementById('spot2');
obj[6]=document.getElementById('chkspot');

var chkraid=obj[0].text.indexOf('RAID'); //Check if Raid is selected

if(chkraid!=-1&&stat==1) //if raid is found
{
obj[4].style.display='inline';
obj[5].style.display='inline';
obj[3].innerHTML="Second Hard Drive For Raid Set-Up";

//Make a header for second drive
obj[2].innerHTML='<select name="drive2" id="drive2">'+'<option value="'+obj[1].value+'">'+obj[1].text+'</option></select>'; ;
//display second drive
calcPrice(document.getElementById('drive2').options[document.getElementById('drive2').selectedIndex],6);
obj[6].innerHTML='<a href="#" onclick="oneDrive();"id="textopt">I already have a matching drive, please just send me one.</a>';
}
else if(stat==1)
{
obj[4].style.display='none';
obj[5].style.display='none';
obj[3].innerHTML="&nbsp;"; //clear second drive header
obj[2].innerHTML="&nbsp;"; //clear second drive display
obj[6].innerHTML='<a href="#" onclick="twoDrives();" id="textopt">I would like to add a second drive to this set-up.</a>'
defaults[6][1]=0;
defaults[6][0]="None Selected";
document.getElementById('msg').innerHTML="";
}
}

var stat=1;

function twoDrives()
{
var opts=document.getElementById('drive').innerHTML;
document.getElementById('chkspot').innerHTML='<select id="drive2" onchange="calcPrice(this.options[this.selectedIndex],6)" name="drive2">'+opts+'</select><br /><a href="#" onclick="oneDrive();">Actually, I just need one drive</a>';
calcPrice(document.getElementById('drive2').options[document.getElementById('drive2').selectedIndex],6);
stat=0;
}

function oneDrive()
{
stat=0;
var obj=new Array(); //set object array
obj[0]=document.getElementById('hd2'); //Second Drive Spot
obj[1]=document.getElementById('hd2head'); //Second Drive Header
obj[2]=document.getElementById('spot1');
obj[3]=document.getElementById('spot2');
obj[4]=document.getElementById('chkspot');

obj[1].innerHTML="&nbsp;"; //clear second drive header
obj[0].innerHTML="&nbsp;"; //clear second drive display
obj[2].style.display='none';
obj[3].style.display='none';
defaults[6][1]=0;
defaults[6][0]="None Selected";
obj[4].innerHTML='<a href="#" onclick="stat=1;dupDrive()">Nevermind, I do need two.</a>';
setDefaultInfo();
}

function setDefault(box,mb,psu,cpu,mem,hd,printer)
{
var g=document.getElementById;
var obj=new Array();
obj[0]=new Array(g('case'),box);
obj[1]=new Array(g('mb'),mb);
obj[2]=new Array(g('psu'),psu);
obj[3]=new Array(g('processor'),cpu);
obj[4]=new Array(g('memory'),mem);
obj[5]=new Array(g('drive'),hd);
obj[6]=new Array(g('printer'),printer);

for(var j=0;j<obj.length;j++)
{
switchSelect(obj[j][0],obj[j][1]);
}

function switchSelect(obj1,obj2)
{
for(var i=0;i<obj1.options.length;i++)
{
if(obj1.options[i].text==obj2)
{
obj1.options[i].selected=true;

if(j==0)
{
changePic(i);
}
}
}
}
isRaid();
}

function calcPrice(amount,x)
{
defaults[x][1]=amount.value;
defaults[x][0]=amount.text;
var total=0;
for(var i=0;i<defaults.length;i++)
{
var cut=defaults[i][0].split('[$');
total=(total*1)+(defaults[i][1])*1;
var comp="comp"+i;
var cost="cost"+i;
document.getElementById(comp).innerHTML=cut[0];
document.getElementById(cost).innerHTML="$"+defaults[i][1];
}
document.getElementById('tot').innerHTML="$"+total;
}

function setDefaultInfo()
{
var total=0;
for(var i=0;i<defaults.length;i++)
{
var cut=defaults[i][0].split('[$');
total=(total*1)+(defaults[i][1])*1;
var comp="comp"+i;
var cost="cost"+i;
document.getElementById(comp).innerHTML=cut[0];
document.getElementById(cost).innerHTML='$'+defaults[i][1];
}
document.getElementById('tot').innerHTML='$'+total;
}

function changePic(y)
{
var pics=new Array();
pics[0]="InvalidSelection.jpg";
pics[1]="SomeCase.jpg";
pics[2]="SomeCase.jpg";
pics[3]="SomeCase.jpg";
pics[4]="SomeCase.jpg";
pics[5]="SomeCase.jpg";
pics[6]="InvalidSelection.jpg";
pics[7]="SomeCase.jpg";
pics[8]="SomeCase.jpg";
pics[9]="SomeCase.jpg";
pics[10]="SomeCase.jpg";
pics[11]="SomeCase.jpg";
pics[12]="SomeCase.jpg";
pics[13]="InvalidSelection.jpg";
pics[14]="SomeCase.jpg";
pics[15]="SomeCase.jpg";
pics[16]="SomeCase.jpg";
pics[17]="SomeCase.jpg";
pics[18]="SomeCase.jpg";
pics[19]="SomeCase.jpg";
document.getElementById('thumbnail').src=pics[y];
document.getElementById('thumbnail').alt=y;
}
</script>
</head>

<body onload="setDefault(defaults[0][0],defaults[1][0],defaults[2][0],defaults[3][0],defaults[4][0],defaults[5][0],defaults[7][0]);setDefaultInfo();">
<!--#include file="nav.html"-->
<form id="form1">
<table name="tbl1" id="tbl1">
<thead>
<th>Customize Your System</th>
</thead>
<tbody>
<tr>
<td class="hdr">Case:</td>
</tr>
<tr>
<td>
<select onchange="calcPrice(this.options[this.selectedIndex],0);changePic(this.options[this.selectedIndex].index);" id="case" name="case">
<option selected>Select. . .</option>
<option value="125">RAIDMAX Samurai Gaming Case - Granite [$125]</option>
<option value="125">RAIDMAX Samurai Gaming Case - Silver [$125]</option>
<option value="130">RAIDMAX Samurai Gaming Case - Red [$130]</option>
<option value="130">RAIDMAX Samurai Gaming Case - Blue [$130]</option>
<option value="130">RAIDMAX Samurai Gaming Case - Yellow [$130]</option>
<option>_________________________________________</option>
<option value="125">NZXT Gaming Case w/400 Watt PSU - Silver [$125]</option>
<option value="125">NZXT Gaming Case w/400 Watt PSU - Black [$125]</option>
<option value="130">NZXT Gaming Case w/400 Watt PSU - Yellow [$130]</option>
<option value="130">NZXT Gaming Case w/400 Watt PSU - Green [$130]</option>
<option value="135">NZXT Gaming Case w/400 Watt PSU - Blue [$135]</option>
<option value="135">NZXT Gaming Case w/400 Watt PSU - Orange [$135]</option>
<option>_________________________________________</option>
<option value="125">A-Top XBlade Ultimate Gaming Case w/450 PSU - Black/Silver[$125]</option>
<option value="125">A-Top XBlade Ultimate Gaming Case w/450 PSU - Silver[$125]</option>
<option value="135">A-Top XBlade Ultimate Gaming Case w/450 PSU - Orange/Silver[$135]</option>
<option value="140">A-Top XBlade Ultimate Gaming Case w/450 PSU - Green/Silver[$140]</option>
<option value="150">A-Top XBlade Ultimate Gaming Case w/450 PSU - Blue/Silver[$150]</option>
<option value="150">A-Top XBlade Ultimate Gaming Case w/450 PSU - Yellow/Silver[$150]</option>
<option value="150">A-Top XBlade Ultimate Gaming Case w/450 PSU - Black/Silver[$150]</option>
</select>
</td>
</tr>
<tr>
<td class="hdr">Motherboard</td>
</tr>
<tr>
<td>
<select onchange="isRaid();calcPrice(this.options[this.selectedIndex],1)" name="mb" id="mb">
<option selected>Select. . . </option>
<option value="125">Some Motherboard[$125]</option>
<option value="170">Some Motherboard (RAID) [$170]</option>
</select>
</td>
</tr>
<tr>
<td class="hdr">Power Supply:</td>
</tr>
<tr>
<td><select onchange="calcPrice(this.options[this.selectedIndex],2)" name="psu" id="psu">
<option selected>Select. . . </option>
<option value="35">Standard Case PSU [$30]</option>
<option value="35">Thermaltake Silent Pure Power 420w PSU [$35]</option>
<option value="50">Aspire Black Triple Fan 520w Aluminum PSU [$40]</option>
<option value="50">Antec 550w PSU w\ 2 Fans 5.25 Control Panel [$50]</option>
<option value="65">ENERMAX 660w PSU [$65]</option>
</select>
</td>
</tr>
<tr>
<td class="hdr">Processor:</td>
</tr>
<tr>
<td>
<select onchange="calcPrice(this.options[this.selectedIndex],3)" name="processor" id="processor">
<option>Select. . .</option>
<option value="150">AMD Athlon 64 2800+ 512KB L2 Cache 1.8GHZ CPU [$150]</option>
<option value="199">AMD Athlon 64 3000+ 512KB L2 Cache 2GHZ CPU [$199]</option>
<option value="250">AMD Athlon 64 3200+ 512KB L2 Cache 2.2GHZ CPU [$250]</option>
<option value="299">AMD Athlon 64 3400+ 512KB L2 Cache 2.4GHZ CPU [$299]</option>
<option value="399">AMD Athlon 64 3700+ 1MB L2 Cache 2.4GHZ CPU [$399]</option>
</select>
</td>
</tr>
<tr>
<td class="hdr">Memory:</td>
</tr>
<tr>
<td><select onchange="calcPrice(this.options[this.selectedIndex],4)" id="memory" name="memory">
<option selected>Select. . .</option>
<option value="150">512MB (2 x 256) PC3200 Memory Corsair [$150]</option>
<option value="155">512MB (2 x 256) PC3200 Memory Mushkin [$155]</option>
<option value="199">512MB (2 x 256) PC3200 Memory Corsair XMS Extreme Series [$199]</option>
<option value="149">768MB (1 x 256, 1 x 512) PC3200 Memory [$149]</option>
<option value="200">1GB (2 x 512) PC3200 Memory Corsair [$200]</option>
<option value="215">1GB (2 x 512) PC3200 Memory OCZ Performance Series [$215]</option>
<option value="249">1GB (2 x 512) PC3200 Memory Corsair Extreme Series w\ Activity LED's[$249]</option>
<option value="275">1GB (2 x 512) PC3200 Memory Corsair XMS Xtra Low Latency [$275]</option>
</select>
</td>
</tr>
<tr>
<td class="hdr">Hard Drive: <span id="msg"></span></td>
</tr>
<tr>
<td>
<select onchange="calcPrice(this.options[this.selectedIndex],5);dupDrive();" id="drive" name="drive">
<option selected>Select. . .</option>
<option value="40">40GB 7200RPM 2MB Cache Ultra ATA-100 [$40]</option>
<option value="45">40GB 7200RPM 8MB Cache Ultra ATA-100 [$45]</option>
<option value="80">80GB 7200RPM 2MB Cache Ultra ATA-100 [$80]</option>
<option value="85">80GB 7200RPM 8MB Cache Ultra ATA-100 [$85]</option>
<option value="90">(Serial ATA) 80GB 7200RPM 8MB Cache SATA-150 [$90]</option>
<option value="95">(Serial ATA) 80GB 7200RPM 8MB Cache SATA-150 [$95]</option>
</select>
</td>
</tr>
<tr class="hide" id="spot1">
<td class="hdr" id="hd2head">&nbsp</td>
</tr>
<tr class="hide" id="spot2">
<td id="hd2">&nbsp;</td>
</tr>
<tr>
<td id="chkspot"></td>
</tr>
<tr>
<td class="hdr">Printer:</td>
</tr>
<tr>
<td>
<select onchange="calcPrice(this.options[this.selectedIndex],7);" id="printer" name="printer">
<option selected>Select. . .</option>
<option value="40">Printer1 [$40]</option>
<option value="45">Printer2 [$45]</option>
<option value="50">Printer3 [$50]</option>
<option value="55">Printer4 [$55]</option>
<option value="60">Printer5 [$60]</option>
<option value="65">Printer6 [$65]</option>
</select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>&nbsp;</td>
</tr>
</tfoot>
</table>
</form>

<table id="table2">
<thead>
<th colspan="3">System Information</th>
</thead>
<tbody>
<tr>
<td class="hdr">Component</td>
<td class="hdr">Description</td>
<td class="hdr">Cost</td>
<tr>
<td class="hdr">Case:</th>
<td id="comp0"></td>
<td id="cost0"></td>
</tr>
<tr>
<td class="hdr">Motherboard:</th>
<td id="comp1">&nbsp;</td>
<td id="cost1">&nbsp;</td>
</tr>
<tr>
<td class="hdr">Power Supply:</th>
<td id="comp2">&nbsp;</td>
<td id="cost2">&nbsp;</td>
</tr>
<tr>
<td class="hdr">Processor:</th>
<td id="comp3">&nbsp;</td>
<td id="cost3">&nbsp;</td>
</tr>
<tr>
<td class="hdr">Memory:</th>
<td id="comp4">&nbsp;</td>
<td id="cost4">&nbsp;</td>
</tr>
<tr>
<td class="hdr">Hard Drive 1:</th>
<td id="comp5">&nbsp;</td>
<td id="cost5">&nbsp;</td>
</tr>
<tr>
<td class="hdr">Hard Drive 2:</th>
<td id="comp6">&nbsp;</td>
<td id="cost6">&nbsp;</td>
</tr>
<tr>
<td class="hdr">Printer:</th>
<td id="comp7">&nbsp;</td>
<td id="cost7">&nbsp;</td>
</tr>
<tr>
<td colspan="2" class="hdr">Total:</th>
<td class="total" id="tot"></td>
</tr>
</tbody>
<tfoot>
<td colspan="3"><input type="submit" value="Submit" method="" action=""> <input type="reset" onclick="window.location.reload()" value="Start Over"></td>

</tfoot>
</table>
<img src="somPic.jpg" id="thumbnail" name="thumbnail"/>


</body>
</html>


Basscyst

DragonXXIV
12-23-2005, 05:31 AM
Thanks for the help, this is exactly what I needed :)

DragonXXIV
12-23-2005, 05:57 AM
Oh, I forgot to ask, it IS okay for me to use your code on my site, right? I will give you credit if I can fit it somewhere and if you want it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum