adding up the values of multiple dropdown lists and displaying the total in a lable.

Hi All,

new to the forums, and quite new to web development so forgive me if this is a bit of a newbie question.

first of all my knowledge of html is quite limited and my knowledge of java is next to nothing so I'm hoping for a really easy to understand answer.

I'm trying to make a simple budgeting tool for someone who wants to have a PC built.

the base price (which includes the case, motherboard and cooling is $204 and this price (displayed in the label) is updated as options are selected in the dropdown menus.

this is the code of my form.

        <p>
          <select 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 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 name="HDD" id="HDD">
            <option value="0">Select HDD
               <option value="70.80">500gb</option>
            <option value="82.80">1TB</option>
            <option value="118.80">2TB</option>
            <option value="130.80">1TB SSHD</option>
            <option value="166.80">3TB</option>
            <option value="178.80">2TB SSHD</option>
            <option value="238.80">4TB</option>
             </select>
        </p>
        <p>
          <select name="RAM" id="RAM">
            <option value="0">Select Amount of RAM</option>
            <option value="66">4gb</option>
            <option value="110.40">8gb</option>
            <option value="202.80">16gb</option>
            <option value="526.80">32gb</option>
             </select>
        </p>
        <p>
          <select name="OD" id="OD">
            <option value="0">Select Optical Drive</option>
            <option value="26.40">DVD-RW</option>
            <option value="102">Blu Ray</option>
             </select>
        </p>
        <p>
          <select name="PSU" id="PSU">
            <option value="0">Select Power Supply</option>
            <option value="58.80">Aerocool VP450 450W True Power</option>
            <option value="70.80">Aerocool VP550 550W True Power</option>
            <option value="94.80">Aerocool VP650 650W Power Supply</option>
            <option value="106.80">Aerocool VP750 750W True Power</option>
            <option value="210">Silverstone Strider Plus 850W ST85F-P</option>
            <option value="214.80">Antec High Current Gamer 900W Power Supply HCG-900</option>
            <option value="226.80">Aerocool Strike-X 1100W</option>
            <option value="418.80">Seasonic X-1250 80Plus Gold 1250W</option>


             </select>
           </p>


      </p>

                  </form>

there is a web developer who I work with who got it to work but he was quite reluctant to give me his code he gave me a tiny bit of code (most of it is missing) and told me to try and figure it out for myself. if only I knew anything about java!

anyway this is what he gave me to put in the head of my page.

$(document).ready(function () {

$('#calcPrice').html($('#basePrice').val());

$('select').bind('change', function (e) {

var price = parseFloat($('#CPU').val()) + etc

$('#calcPrice').html(price);

});

</script>

I sort of had a crack at it myself and came up with this.

$('#calcPrice').html($('#basePrice').val(204));

$("select").bind("change", function (e) {

        var price = parseFloat($("#CPU").val())
     +parseFloat($("#GPU").val())
     +parseFloat($("#HDD").val())
     +parseFloat($("#RAM").val())
     +parseFloat($("#OD").val())
     +parseFloat($("#PSU").val())
     +parseFloat($("#baseprice").val())

        $("#calcPrice").html(price);

    });

});
</script>

and I tried this underneath my form to display the result however it doesn't work.

Price: <u id="price"></u>

<script>
var price = document.getElementById(#calcprice);

price.innerHTML = value();
</script>

(is it clear that I have no idea yet? hehe)

any help would be greatly appreciated!

adding up the values of multiple dropdown lists and displaying the total in a lable.

adding up the values of multiple dropdown lists and displaying the total in a lable.

Topic Participants

trenticl

jakecigar

vstadnichenko

jtara-jquery