There exists a configurator and price calculator:
HTML:
<form id="form1" method="post" action="">
<p>
<select class="form-control" name="CPU" id="CPU">
<option value="0" selected>Select CPU</option>
<option value="246">Intel Core i5 4440 3.1GHz (3.3GHz Turbo) Quad Core</option>
<option value="268.80">Intel Core i5 4570 3.2GHz (3.6GHz Turbo) Quad Core CPU</option>
<option value="282">Intel Core i5 4570S 2.9GHz (3.6GHz Turbo) Quad Core CPU</option>
<option value="294">Intel Core i5 4670 3.4GHz (3.8GHz Turbo) Quad Core CPU</option>
<option value="414">Intel Core i7 4770 3.4GHz (3.9GHz Turbo) Quad Core CPU</option>
</select>
</p>
<p>
<select class="form-control" name="GPU" id="GPU">
<option value="0">Select Graphics Card</option>
<option value="1498.80">EVGA GeForce GTX Titan 6GB Superclocked</option>
<option value="958.80">Gigabyte GeForce GTX 780 Ti 3GB</option>
<option value="754.80">Gigabyte GeForce GTX 780 OC 3GB</option>
<option value="502.80">EVGA GeForce GTX 770 Superclocked 2GB</option>
<option value="378">EVGA GeForce GTX 760 ACX 2GB</option>
<option value="262.80">Gigabyte GeForce GTX 660 OC 2GB</option>
<option value="250.80">EVGA GeForce GTX 650 Ti Boost 2GB Superclocked</option>
<option value="154.80">EVGA GeForce GTX 650 1GB</option>
<option value="130.80">ASUS GeForce GT 640 2GB</option>
<option value="814.80">XFX Radeon R9 290X 4GB</option>
<option value="598.80">XFX Radeon R9 290 4GB</option>
</select>
</p>
<p>
<select class="form-control" name="HDD" id="HDD">
<option value="0">Select HDD
<option value="70.80">SSD 500gb</option>
<option value="82.80">HDD 1TB</option>
<option value="118.80">HDD 2TB</option>
<option value="130.80">SSD 1TB</option>
<option value="166.80">HDD 3TB</option>
<option value="178.80">SSD 2TB</option>
<option value="238.80">HDD 4TB</option>
</select>
</p>
<p>
<select class="form-control" name="RAM" id="RAM">
<option value="0">Select Amount of RAM</option>
<option value="66">RAM DDR3 4gb</option>
<option value="110.40">RAM DDR4 8gb</option>
<option value="202.80">RAM DDR4 16gb</option>
<option value="526.80">RAM DDR3 32gb</option>
</select>
</p>
<p>
<select class="form-control" name="OD" id="OD">
<option value="0">Select Optical Drive</option>
<option value="26.40">Optical Drive DVD-RW</option>
<option value="102">Optical Drive Blu Ray</option>
</select>
</p>
<p>
<select class="form-control" name="PSU" id="PSU">
<option value="0">Select Power Supply</option>
<option value="58.80">PSU Aerocool VP450 450W True Power</option>
<option value="70.80">PSU Aerocool VP550 550W True Power</option>
<option value="94.80">PSU Aerocool VP650 650W Power Supply</option>
<option value="106.80">PSU Aerocool VP750 750W True Power</option>
<option value="210">PSU Silverstone Strider Plus 850W ST85F-P</option>
<option value="214.80">PSU Antec High Current Gamer 900W Power Supply HCG-900</option>
<option value="226.80">PSU Aerocool Strike-X 1100W</option>
<option value="418.80">PSU Seasonic X-1250 80Plus Gold 1250W</option>
</select>
</p>
</form>Price: $<u id="price"></u>
JAVASCRIPT:
$(function () {
var fields = $('#form1 :input').change(calculate)
$("#form1 option").text(function(i,t){
if (this.value!=="0")
return t + " - $" + this.value
})
function calculate() {
var price = 0;
fields.each(function () {
price += +$(this).val();
})
$('#price').html(price.toFixed(2));
}
})
The current output of this calculator is $ price - the sum of prices of selected items. You can look at it and you can copy the price - nothing else.
I'd like it to output the selected items in text form - and then the total price, so that it could be copied and pasted e.g. to an email - like this:
Intel Core i5 4570 3.2GHz (3.6GHz Turbo) Quad Core CPU - $268.80
EVGA GeForce GTX Titan 6GB Superclocked - $1498.80
HDD 1TB - $82.80
RAM DDR4 8gb - $110.40
Optical Drive Blu Ray - $102
PSU Aerocool VP750 750W True Power - $106.80
Total Price: $2169.60
Please advise what's the best way to implement it. Also a button "Copy selection" would be nice to have.
Thank you!