Input with a fixed value

Question

I want to create a table with a fixed price, an input field where someone can enter a value and a column wit the total (price*quantity)

The problem i have is that the code i wrot works but only with integers. it does not read after the comma. So if i enter a price of 4.39 it calculates with 4.

Also if i set the type to "decimal" or "number" it doesn't work.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.price,.quantity').on('keyup', function () {
                var row = $(this).closest('tr');
                var price = $(row).find('.price').val() == '' ? 0 : $(row).find('.price').val();
                var quantity = $(row).find('.quantity').val() == '' ? 0 : $(row).find('.quantity').val();
                $(row).find('.total').val(parseInt(isNaN(price) ? 0 : price) * parseInt(isNaN(quantity) ? 0 : quantity));
            });
        });
    </script>
</head>
<body>
    <div>
        <table>
            <tr>
                <th>Name</th>
                <th>Price</th>
                <th>Quantity</th>
                <th>Total</th>
            </tr>
            <tr>
                <td>Chai</td>
                <td><input type="text" class="price" value="1.39" /></td>
                <td><input type="text" class="quantity" /></td>
                <td><input type="text" class="total" /></td>
            </tr>
            <tr>
                <td>Chang</td>
                <td><input type="text" class="price" /></td>
                <td><input type="text" class="quantity" /></td>
                <td><input type="text" class="total" /></td>
            </tr>
            <tr>
                <td>Aniseed Syrup</td>
                <td><input type="text" class="price" /></td>
                <td><input type="text" class="quantity" /></td>
                <td><input type="text" class="total" /></td>
            </tr>
        </table>
    </div>
</body>
</html>

Does this answer your question? [How do I make a text input non-editable?](https://stackoverflow.com/questions/3676127/how-do-i-make-a-text-input-non-editable) — kmoser, Oct 14 '21 at 06:28
Thanks that helped Now there is only the probleme that the code sees the value as integer and cant read after the "." — Setzi138, Oct 14 '21 at 06:57

BadPiggie · Accepted Answer · 2021-10-14T06:55:18.750

You can add readonly attribute to your input fields to make it non-editable.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.price,.quantity').on('keyup', function () {
                var row = $(this).closest('tr');
                var price = $(row).find('.price').val() == '' ? 0 : $(row).find('.price').val();
                var quantity = $(row).find('.quantity').val() == '' ? 0 : $(row).find('.quantity').val();
                $(row).find('.total').val(parseInt(isNaN(price) ? 0 : price) * parseInt(isNaN(quantity) ? 0 : quantity));
            });
        });
    </script>
</head>
<body>
    <div>
        <table>
            <tr>
                <th>Name</th>
                <th>Price</th>
                <th>Quantity</th>
                <th>Total</th>
            </tr>
            <tr>
                <td>Chai</td>
                <td><input type="text" class="price" /></td>
                <td><input type="text" class="quantity" /></td>
                <td><input type="text" class="total" readonly/></td>
            </tr>
            <tr>
                <td>Chang</td>
                <td><input type="text" class="price" /></td>
                <td><input type="text" class="quantity" /></td>
                <td><input type="text" class="total" readonly/></td>
            </tr>
            <tr>
                <td>Aniseed Syrup</td>
                <td><input type="text" class="price" /></td>
                <td><input type="text" class="quantity" /></td>
                <td><input type="text" class="total" readonly/></td>
            </tr>
        </table>
    </div>
</body>
</html>

Input with a fixed value

1 Answers1