JSFiddle - React, Tailwind, and code Playground
HTML
<div class="content_half float_r">
<form id="add2cart" name="cart" method="Post" action="<?php fetchdir($bpages); ?>cart.php">
<table>
<tr>
<td width="160">Price:</td>
<td name="price" id="price">£<span id="priceDisplay"><?php echo $row [ 'Start_Cost']; ?></span>
</td>
</tr>
<tr>
<td for="size" width="160">size*:</td>
<td>
<select name="size" class="small" id="size"></select>
</td>
</tr>
<tr>
<td>size: <span id="sizeDisplay"></span>
</td>
</tr>
<tr>
<td>Quantity</td>
<td>
<input type="text" id="qty" name="Qty" value="1" style="width: 20px; text-align: right" />
</td>
</tr>
<tr>
<td>Total</td>
<td>£<span id="totalDisplay"></span>
</td>
</tr>
</table>
<div class="cleaner h20"></div>
<input type="hidden" name="pid" id="id" value="<?php echo $id; ?>" />
<input type="Submit" class="button" name="button" id="button" value="Add to shopping cart" />
</form>
</div>
JavaScript
var shoeData = {
12: 25,
14: 30,
16: 35
}
$(function () {
$(document).ready(function () {
$.each(shoeData, function (key, value) {
$("#size").append($("<option>", {
"value": key,
"text": key + " size(£" + value + ")"
}));
});
updateHandler();
});
$("#size").on('change', updateHandler);
$("#qty").on('input', updateHandler);
});
function updateHandler(e) {
// accumulate the data
var value = $("#size").val();
var quantity = $("#qty").val();
var price = shoeData[value];
var endPrice = price * quantity;
// display the data
$('#priceDisplay').html(price);
$("#sizeDisplay").html(value);
$("#totalDisplay").html(endPrice);
}