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