CODEWITHSUNDEEP
javascriptphpjqueryhtmlforms
PLAYCUBE
PLAYCUBE

Reputation: 875

HTML/JS: Calculating and displaying price

I am trying to calculate the price by having different quantities, conditions, etc. I found a good snippet of code here:

http://jsfiddle.net/Wm6zC/

Still, I am searching for a way to have a label, paragraph or a different similar tag, which will update the price, instead using input="text" method. Something like:

<FORM Name="myform">
  <LABEL>Quantity:</LABEL>
  <SELECT NAME="Item" onChange="calculatePrice()" id="Item">
    <OPTION value="1">1</OPTION>
    <OPTION value="2">2</OPTION>
    <OPTION value="3">3</OPTION>
    <OPTION value="4">4</OPTION>
    <OPTION value="5">5</OPTION>
    <OPTION value="6">6</OPTION>
    <OPTION value="7">7</OPTION>
    <OPTION value="8">8</OPTION>
  </SELECT>
</FORM>

<p> Total Cost: 22.9 </P>

And by selecting a quantity, the price gets updated right away. Any idea how to achieve this?

Upvotes: 0

Views: 2648

Answers (1)

Patrick Barr
Patrick Barr

Reputation: 1123

If you add an ID to the <p> tag you should be able to access it from javascript on the select's onChange event.

<FORM Name="myform">
    <LABEL>Quantity:</LABEL>
    <SELECT NAME="Item" onChange="calculatePrice()" id="Item" onChange="calculateOnChange">
        <OPTION value="1">1</OPTION>
        <OPTION value="2">2</OPTION>
        <OPTION value="3">3</OPTION>
        <OPTION value="4">4</OPTION>
        <OPTION value="5">5</OPTION>
        <OPTION value="6">6</OPTION>
        <OPTION value="7">7</OPTION>
        <OPTION value="8">8</OPTION>
    </SELECT>
</FORM>

<p id="total"> Total Cost: 22.9 </P>

Javascript:

function calculateOnChange() {
    var cost = 0;
    // logic adding the values together: i.e. item.value * itemqty.value
    document.getElementById("total").innerHTML = "Total Cost: " + cost;
}

EDIT: As was mentioned in the comments for those who are new to javascript who don't know the difference between .value, .innerHTML, and .innerText here's a quick description of them.

.value - is a property on input elements that contain the value of the user's input.

.innerHTML - is a property on layout elements that contains the HTML encoded string of everything between it's opening and closing tag. (yes this means that you can get the string "<LABEL>Quantity:</LABEL><SELECT NAME=\"Item\" onChange=\"calculatePrice()\" id=\"Item\" onChange=\"calculateOnChange\">...</SELECT>" if you were to call it on the form)

.innerText - is a property like innerHTML but it is not encoded with HTML, it's encoded as plain text. This property is discouraged as it isn't a W3C standard.

For better descriptions about these properties and other text properties with HTML elements, see @faraz's answer to this question: Difference between innerText and innerHTML in javascript.

Upvotes: 1

Related Questions