Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    PC Building Form

    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.

  • #2
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I really need to get this finished ASAP. Please, someone help.

  • #3
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    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.

    Code:
    <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
    Last edited by Basscyst; 12-23-2005 at 02:30 AM.
    Helping to build a bigger box. - Adam Matthews

  • #4
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the help, this is exactly what I needed

  • #5
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •