I have an HTML table with a "select_tag" field and I want to have another field that receives the option selected then multiply by another number for the price to display the total. Here is the table:
<table>
<tr>
<td>(select_tag)</td>
<td>price</td>
<td>total</td>
</tr>
</table>
How would I do this?
My answer is similar to @pythonFoo's but I've assumed a static price and separated the JS from HTML:
HTML:
<table>
<tr>
<td>
<select id="quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="5">5</option>
</select>
</td>
<td>price: <span id="price">$2.50</span></td>
<td>total: <span id="total">$2.50</span></td>
</tr>
</table>
JavaScript (again, assumes the value in 'price' is constant and you're just choosing 'quantity'. If this isn't the case, please clarify your question):
var quantitySelect = document.getElementById("quantity");
var priceStr = document.getElementById("price").innerHTML;
var price = parseFloat(priceStr.substring(1), 10);
quantitySelect.onchange = function() {
var quantity = parseInt(this.value, 10);
var total = document.getElementById("total");
var computedTotal = price * quantity;
total.innerHTML = "$" + computedTotal.toFixed(2);
};
You would include the JavaScript in the <head> tag of your page, under a <script type="text/javascript"> tag.
See a working example here: http://jsfiddle.net/andrewwhitaker/agepm/
I did not understand multiply by what, but if you want to multiply by a quantity how "total" suggest, this code should work:
<script type="text/javascript">
price = [];
price[0] = 10000;
price[1] = 20000;
price[2] = 30000;
price[3] = 40000;
</script>
<table>
<tr>
<td><select id="select" onchange="document.getElementById('price').innerHTML = price[document.getElementById('select').value]; document.getElementById('total').innerHTML = price[document.getElementById('select').value] * document.getElementById('qt').value; ">
<option value="0">Volvo</option>
<option value="1">Saab</option>
<option value="2">Mercedes</option>
<option value="3">Audi</option>
</select></td>
<td>
<input type="text" id="qt" onchange="document.getElementById('total').innerHTML = price[document.getElementById('select').value] * document.getElementById('qt').value;" value="1">
</td>
<td id="price">Price</td>
<td id="total">total</td>
</tr>
</table
In the array price, there are the prices. In the selectbox select the items with the id of the array and in the inputbox there is the number of items. It's basic, so it don't do controls on the value.
Just for fun, see my Calctastic library (originally written over 7 years ago!). The first example uses a select and automatically updates another field as it changes.
