Home/ Questions/Q 3593864
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T19:38:03+00:00

I have an HTML table with a select_tag field and I want to have

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0