Jump to content
jbs

Javascript form calculator

Recommended Posts

Hello, I'm currently trying to put together a simple javascript calculator. The example I've found works great but I seem to be unable to get two pretty important changes to take place.
The first thing I'm trying to do is get a $ symbol inside the total box, aligned left before the total (and also have the default value before changing anything to display "$0").
The other thing would be getting the "input-text qty text" class to have an effect on the total price. I appreciate any help in advance.

<FORM Name="myform">
    <SELECT NAME="memoryItem" onChange="calculatePrice()" id="memoryItem">
       <OPTION value="0">Select One Choice from List-Memory Upgrade</OPTION>
       <OPTION value="49">8 GB add $49</OPTION>
       <OPTION value="98">12 GB add $98</OPTION>
       <OPTION value="159">16 GB add $159</OPTION>
    </SELECT>

    <SELECT NAME="hddItem" onChange="calculatePrice()" id="hddItem">
       <OPTION value="0">Select One Choice from List-HDD Upgrade</OPTION>
       <OPTION value="109">1 TB HD add $109</OPTION>
       <OPTION value="150">1.5 TB HD add $150</OPTION>
       <OPTION value="199">2 TB HD add $199</OPTION>
       <OPTION value="299">250 GB SSD add $299</OPTION>
    </SELECT>

    <SELECT NAME="networkItem" onChange="calculatePrice()" id="networkItem">
       <OPTION value="0">Select One Choice from List- Network Upgrade</OPTION>
       <OPTION value="109">56K V90 or X2 Modem add $109</OPTION>
       <OPTION value="79">10/100 NIC add $79</OPTION>
       <OPTION value="279">Combo Modem and NIC add $279</OPTION>
    </SELECT>
</FORM>

<input type="number" class="input-text qty text" step="1" min="1" max="" name="quantity" style="width: 62px; color: #000" value="1" title="Qty" size="4" pattern="[0-9]*" inputmode="numeric" />
<INPUT type="text" id="PicExtPrice" Size=8>

 

<script>

 function calculatePrice(){

      //Get selected data  
      var elt = document.getElementById("memoryItem");
      var memory = elt.options[elt.selectedIndex].value;

      elt = document.getElementById("hddItem");
      var hdd = elt.options[elt.selectedIndex].value;

      elt = document.getElementById("networkItem");
      var network = elt.options[elt.selectedIndex].value;

      //convert data to integers
      memory = parseInt(memory);
      hdd = parseInt(hdd);
      network = parseInt(network);

      //calculate total value  
      var total = memory+hdd+network; 

      //print value to  PicExtPrice 
      document.getElementById("PicExtPrice").value=total;

 }

</script>

Share this post


Link to post
Share on other sites

Instead of input for Total, why not use a element such as div, then use content: to add $ symbol

            #PicExtPrice {min-width: 200px; display: inline-block; border: 1px ridge #ccc;}
            #PicExtPrice:before {content: "$"; }
<div id="PicExtPrice">0</div>

change js to

document.getElementById("PicExtPrice").innerHTML=total;

 

Share this post


Link to post
Share on other sites
27 minutes ago, dsonesuk said:

Instead of input for Total, why not use a element such as div, then use content: to add $ symbol


            #PicExtPrice {min-width: 200px; display: inline-block; border: 1px ridge #ccc;}
            #PicExtPrice:before {content: "$"; }

<div id="PicExtPrice">0</div>

change js to


document.getElementById("PicExtPrice").innerHTML=total;

 

That works great, guess I was way off trying to make changes within js itself to force the "$" to display. I swear I'm almost done bugging you guys with these silly simple questions.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×