HTML & JavaScript form total price from multiple options not changing

I am encountering a problem within my form that updates the final price when another option is chosen. I am not sure where the problem lies but I have looked thoroughly for it. I have used this exact code before only with different variable names and ids. It might be the most obvious mistake but I would really appreciate the help. Please note I am not experienced in JavaScript - I only did this for practice but I am really struggling to get the result I want, I am sure help will help me understand where I went wrong for future reference if it's a complex answer to my problem.

HTML:

<form name="pcoptions">
        <label>Choose Your Build Time
            <select name="buildtimeItem" onchange="calculatePrice()" id="buildtimeItem">
            <option value="0.00">Standard Build - Ready to ship within 7 working days (£0.00)</option>
            <option value="60">FAST TRACK BUILD - Ready to ship within 4 working days (+ £60.00)</option>
            <option value="100.00">FAST TRACK BUILD- Ready to ship within 2 working days (+ £100.00)</option>
            </select>
        </label>
        <label>Choose Your Warranty
            <select name="warrantyItem" onchange="calculatePrice()" id="warrantyItem">
            <option value="0.00">24 MONTH WARRANTY - Collect & Return (£0.00)</option>
            <option value="119.00">36 MONTH WARRANTY - Collect & Return (+ £119.99)</option>
            </select>
        </label>
        <label>Choose Your Operating System
            <select name="osItem" onchange="calculatePrice()" id="osItem">
            <option value="0.00">No Operating System (£0.00)</option>
            <option value="77.99">Microsoft Windows 7 Home Premium 64 Bit (+ £77.99)</option>
            <option value="116.99">Microsoft Windows 7 Professional 64 Bit OEM (+ £116.99)</option>
            <option value="146.99">Microsoft Windows 7 Ultimate 64 Bit OEM (+ £146.99)</option>
            <option value="77.99">Microsoft Windows 8.1 64 Bit (+ £77.99)</option>
            <option value="116.99">Microsoft Windows 8.1 Pro 64 Bit (+ £116.99)</option>
            </select>
        </label>
        <label>Choose Your Security Software
            <select name="securityItem" onchange="calculatePrice()" id="securityItem">
            <option value="0.00">30 Day Free Trial - Eset Smart Security Anti Virus and Internet Security  (£0.00)</option>
            <option value="26.99">Eset NOD32 AntiVirus - 1 Year License (+ £26.99)</option>
            <option value="34.99">Eset Smart Security Anti Virus and Internet Security - 1 Year License (+ £34.99)</option>
            <option value="54.99">Eset Smart Security Anti Virus and Internet Security - 2 Year License (+ £54.95)</option>
            <option value="74.99">Eset Smart Security Anti Virus and Internet Security - 3 Year License (+ £74.99)</option>
            <option value="0.00">No Security Software Supplied (£0.00)</option>
            </select>
        </label>
        <label>Choose Your Case 
            <select name="casepcItem" onchange="calculatePrice()" id="casepcItem">
            <option value="0.00">BitFenix Neos ATX Tower Case - Black/Red (£0.00)</option>
            <option value="0.00">BitFenix Neos ATX Tower Case - Black (£0.00)</option>
            <option value="0.00">BitFenix Neos ATX Tower Case - White/Silver (£0.00)</option>
            <option value="0.00">BitFenix Neos ATX Tower Case - White/Red (£0.00)</option>
            <option value="0.00">BitFenix Neos ATX Tower Case - White/Blue (£0.00)</option>
            <option value="0.00">BitFenix Neos ATX Tower Case - White/White (£0.00)</option>
            <option value="0.00">BitFenix Neos ATX Tower Case - Black/Silver (£0.00)</option>
            <option value="0.00">BitFenix Neos ATX Tower Case - Black/Blue (£0.00)</option>
            </select>
        </label>
        <label>Choose Your Memory
            <select name="ramItem" onchange="calculatePrice()" id="ramItem">
            <option value="0.00">8GB (2x4GB) DDR3 1600MHz Dual Channel (£0.00)</option>
            <option value="66.96">16GB (2x8GB) DDR3 1600MHz Dual Channel (+ £66.96)</option>
            </select>
        </label>
        <label>Choose Your Primary Hard Drive / Solid State Drive
            <select name="primaryhddItem" onchange="calculatePrice()" id="primaryhddItem">
            <option value="0.00">Seagate Barracuda 500GB 7200RPM Hard Drive (£0.00)</option>
            <option value="5.46">Seagate Barracuda 1TB 7200RPM Hard Drive (+ £5.46)</option>
            <option value="26.50">Seagate Barracuda 2TB 7200RPM Hard Drive (+ £26.50)</option>
            <option value="25.50">Samsung 120GB 840 Evo Series Solid State Drive (+ £25.50)</option>
            <option value="65.46">Samsung 250GB 840 Evo Series Solid State Drive (+ £65.46)</option>
            <option value="145.50">Samsung 500GB 840 Evo Series Solid State Drive (+ £145.50)</option>
            <option value="284.99">Samsung 1TB 840 Evo Series Solid State Drive (+ £284.99)</option>
            </select>
        </label>
        <label>Choose Your Secondary Hard Drive / Solid State Drive
            <select name="secondaryhddItem" onchange="calculatePrice()" id="secondaryhddItem">
            <option value="0.00">No Second Hard Drive (£0.00)</option>
            <option value="59.99">Samsung 120GB 840 Evo Series Solid State Drive (+ £59.99)</option>
            <option value="99.95">Samsung 250GB 840 Evo Series Solid State Drive (+ £99.95)</option>
            <option value="179.99">Samsung 500GB 840 Evo Series Solid State Drive (+ £179.99)</option>
            <option value="319.48">Samsung 1TB 840 Evo Series Solid State Drive (+ £319.48)</option>
            <option value="39.95">Seagate Barracuda 1TB 7200RPM Hard Drive (+ £39.95)</option>
            <option value="60.98">Seagate Barracuda 2TB 7200RPM Hard Drive (+ £60.98)</option>
            <option value="76.99">Seagate Barracuda 3TB 7200RPM Hard Drive (+ £76.99)</option>
            </select>
        </label>
        <label>Choose Your Graphics Card 
            <select name="gpuitem" onchange="calculatePrice()" id="gpuItem">
            <option value="0.00">AMD Radeon R7 240 2048MB Graphics Card (£0.00)</option>
            <option value="18.00">AMD Radeon R7 250 2048MB Graphics Card (+ £18.00)</option>
            <option value="35.00">AMD Radeon R7 260X 2048MB Graphics Card (+ £35.00)</option>
            <option value="84.86">AMD Radeon R9 270X 2048MB Graphics Card (+ £84.96)</option>
            <option value="105.00">AMD Radeon R9 270X 4096MB Graphics Card (+ £105.00)</option>
            <option value="143.00">AMD Radeon R9 280 3072MB Graphics Card (+ £143.00)</option>
            <option value="155.00">AMD Radeon R9 280X 3072MB Graphics Card (+ £155.00)</option>
            </select>
        </label>
        <label>Choose Your Sound Card 
            <select name="soundItem" onchange="calculatePrice()" id="soundItem">
            <option value="0.00">No Sound Card Upgrade (£0.00)</option>
            <option value="22.99">Asus Xonar DG 5.1 Sound Card With Built In Headphone Amp (+ £22.99)</option>
            <option value="34.99">Asus Xonar DS 7.1 Sound Card (+ £34.99)</option>
            <option value="49.99">Asus Xonar D1 7.1 Sound Card (+ £49.99)</option>
            <option value="89.99">Asus Xonar D2 7.1 Sound Card (+ £89.99)</option>
            </select>
        </label>
    <button type="button" onclick="calculatePrice()"></button>
    Total Price<INPUT type="text" id="finalpriceexcvat"/>
</form>

And here is the JavaScript to go with it:

function calculatePrice(pcoptions) {

 var cost = document.getElementById("buildtimeItem");
 var buildtime = cost.options[cost.selectedIndex].value;

 var cost2 = document.getElementById("warrantyItem");
 var warranty = cost2.options[cost2.selectedIndex].value;

 var cost3 = document.getElementById("osItem");
 var os = cost3.options[cost3.selectedIndex].value;

 var cost4 = document.getElementById("securityItem");
 var security = cost4.options[cost4.selectedIndex].value;

 var cost5 = document.getElementById("casepcItem");
 var casepc = cost5.options[cost5.selectedIndex].value;

 var cost6 = document.getElementById("ramItem");
 var ram = cost6.options[cost6.selectedIndex].value;

 var cost7 = document.getElementById("primaryhddItem");
 var primaryhdd = cost7.options[cost7.selectedIndex].value;

 var cost8 = document.getElementById("secondaryhddItem");
 var secondaryhdd = cost8.options[cost8.selectedIndex].value;

 var cost9 = document.getElementById("gpuItem");
 var gpu = cost9.options[cost9.selectedIndex].value;

 var cost10 = document.getElementById("soundItem");
 var sound = cost10.options[cost10.selectedIndex].value;


 buildtime = parseInt(buildtime, 10);
 warranty = parseInt(warranty, 10);
 os = parseInt(os, 10);
 security = parseInt(security, 10);
 casepc = parseInt(casepc, 10);
 ram = parseInt(ram, 10);
 primaryhdd = parseInt(primaryhdd, 10);
 secondaryhdd = parseInt(secondaryhdd, 10);
 gpu = parseInt(gpu, 10);
 sound = parseInt(sound, 10);


 var total = buildtime + warranty + os + security + casepc + ram + primaryhdd + secondaryhdd + gpu + sound;

 document.getElementById("finalpriceexcvat").value = total;

}

My practice comes from other sites where I look at them and simply try to do what they do but in a different format. Some of you might recognize the layout from somewhere. The outcome I am looking for is clear - I'd simply like to price to change when an option is changed at each of them. If possible, each item with everything at the default of (0.00) there'll be a minimum price of sorts - is it simple to do that?

Again, I am sorry if the answer to my problem is obvious but I am struggling to resolve it myself.

Thanks

EDIT

The problem is resolved and the price now shows up in the total box. I have another issue though, being a minor one - how would I go about making sure that the result would show how many pennies it would cost? At the moment it only shows the cost in pounds (so basically decimal). ParseFloat returns numbers beyond 2 decimal figures when I select multiple options.

EDIT 2

The decimal place problem has been resolved, now just one more question - how would I go about making the default value of the PC all together is set to a minimum within the input and when an option is selected the value of that would be ADDED on top of say £123.45. I tried putting value="" in the input of my HTML but it simply removes the value and replaces it with the option selected. Thanks

Answers


Use

parseFloat()

instead of

parseInt()

see this jsfiddle

also corrected the pricing in your second warranty option.


Need Your Help

OpenGL quad strip not showing

opengl

I'm trying to draw 2 Quad_Strips on top of each other, but I can't see one of them when its rotated on top of the other.

How to get a quick status from the Emacs compilation buffer?

emacs

By default, emacs 22.1.1 only shows the top of the compilation buffer when you first issue the compile command. I would like it to scroll to the bottom automatically when I use the compile command...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.