PLAYCUBE PLAYCUBE - 3 months ago 32
jQuery Question

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?

Answer

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;
}