CODEWITHSUNDEEP
javascripthtml-table
Zangrandi
Zangrandi

Reputation: 57

Select text in html table with Javascript

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?

Upvotes: 0

Views: 1012

Answers (4)

ifaour
ifaour

Reputation: 38135

This is the simplest way I could think off...my function supports multiple TR and don't rely on IDs or jQuery...etc (Even though I would prefer jQuery)

Upvotes: 0

Phrogz
Phrogz

Reputation: 303224

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.

Upvotes: 0

Andrew Whitaker
Andrew Whitaker

Reputation: 126042

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/

Upvotes: 1

pythonFoo
pythonFoo

Reputation: 2194

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.

Upvotes: 0

Related Questions