View Full Version : Help with javascript price calculator!

12-03-2006, 05:29 PM
Hello all,

As many of you may know my website, www.PlugComputers.com is in the business of building custom gaming computers. I need some help coding one part of my site and I have never been too good at javascript...

First off, I'm assuming what I am wanting to do would be done with javascript?...my problem is as follows:

On our build customization pages (www.PlugComputers.com/intelschedule.php (http://www.plugcomputers.com/intelschedule.php) for example) vistors can go though the page and select which components they want for their computer. The problem is people are selecting things they really dont know much about as far as the prices are concerned. Their submissions are submitted to our build team and then the vistor is quoted a price for their configuration. The issue with this is the computer they configure is often way out of their price range.

What I wanted to do was assign dollar values to each component on the page so that when a user selects that option a total price at the bottom of the page is updated accordingly. The price upgrade amount would then be listed next to the component they selected.

For Example:
[_] AMD Dual Core x2 3800+ (+0)
[X] AMD Dual Core x2 4400+ (+$70)

When the visitor selects option 2 above (Dual Core 4400+) their system total will increase by $70, and so on for the rest of the components of their computer such as hard drives, memory, video cards, ect.

If you are familiar with Dell or Alienware's custom build pages you will see what Im talking about, people click what they want, and are given a new price based upon their selections.

If anyone could help me out with this it would be greatly appreciated. I have tried looking for some scripts for this, but havent been able to really find any. Maybe I am looking in the wrong place? Or is there someone here that has some experience with this? Thanks alot.


Philip M
12-03-2006, 10:37 PM
Sounds a bit close to advertising.
And what you are seeking is far beyond what you can expect for free from users of this forum, especially as it is a commercial site. Suggest you re-post under paid work offers.

12-04-2006, 01:54 AM
You would have to rewrite spans with IDs so a price could appear at the relative innerHTML.
Each time a radio is clicked, a loop would recycle all the radios to add prices and then display the total somewher in another div.

12-04-2006, 02:50 AM
simple solution:

assuming all radio buttons in your form are items that have prices.....
this is jsut an example, do not replace your entire code with this.
all you need to do is in the value of the radio button put the price and "~~" before the description. and everytime the form is clicked on the total updates.

<form name=theForm onclick=getTotal() >
<div class="item">
<h1>Processor (CPU):</h1>
<input name="CPU" type="radio" checked value="0~~Intel Core 2 Duo E6300 at 1.86GHz"> Intel Core 2 Duo E6300 at 1.86GHz <br>
<input name="CPU" type="radio" value="10~~Intel Core 2 Duo E6400 at 2.13GHz"> Intel Core 2 Duo E6400 at 2.13GHz <br>
<input name="CPU" type="radio" value="20~~Intel Core 2 Duo E6600 at 2.4GHz"> Intel Core 2 Duo E6600 at 2.4GHz <br>
<input name="CPU" type="radio" value="30~~Intel Core 2 Duo E6700 at 2.66GHz"> Intel Core 2 Duo E6700 at 2.66GHz <br>
<input name="CPU" type="radio" value="40~~Intel Core 2 Xtreme X6800 at 2.93GHz"> Intel Core 2 Xtreme X6800 at 2.93GHz with 4MB Cache
<div class="item">
<h1>Operating System:</h1>
<input name="OperatingSystem" type="radio" checked value="0~~Windows XP Media Center Edition with Vista Coupon"> Windows XP Media Center Edition with Vista Coupon <br>
<input name="OperatingSystem" type="radio" value="100~~Windows XP Professional Edition with Vista Coupon"> Windows XP Professional Edition with Vista Coupon
<div class="item">
<input name="Case" type="radio" value="0~~Antec P180 Silver"> Antec P180 Silver <br>
<input name="Case" type="radio" value="10~~Asus Vento Black"> Asus Vento Black <br>
<input name="Case" type="radio" value="20~~Lian Li PC-V1000 Plus II Black"> Lian Li PC-V1000 Plus II Black <br>
<input name="Case" type="radio" value="30~~Lian Li PC-V1000 Plus II Silver"> Lian Li PC-V1000 Plus II Silver <br>
<input name="Case" type="radio" value="40~~Logisys Acrylic"> Logisys Acrylic (Specify color below in "Case Lighting Upgrades") <br>
<input name="Case" type="radio" value="50~~NZXT Lexa"> NZXT Lexa <br>
<input name="Case" type="radio" checked value="60~~Aspire XCruiser Blue"> Aspire X-Cruiser Blue <br>
<input name="Case" type="radio" value="70~~Thermaltake Kandalf Black"> Thermaltake Kandalf Black <br>
<input name="Case" type="radio" value="80~~Thermaltake Kandalf Silver"> Thermaltake Kandalf Silver <br>
<input name="Case" type="radio" value="90~~Coolermaster Stacker 830"> Coolermaster Stacker 830 <br>
<input name="Case" type="radio" value="Other"> Other (Please specify) <input name="OtherCase" type="text" size="40">

<span id=totalspan>

<script type=text/javascript>
function getTotal(){
var form=document.theForm;
var inputs=form.getElementsByTagName('input');
var length=inputs.length;
var total='0';

var checked=inputs[i].checked?1:0;
var value=inputs[i].value.split("~~")[0];
document.getElementById('totalspan').innerHTML="Total price will be: $"+total