This is what JavaScript was made for.
- Display the table clearly to the end user
- Use a select for the number of pieces
- Use a text input to display the cost
- Use another input to display the subtotal
- Recalculate when the pieces select changes
When user clicks to continue, then submit the total input field.
Looks like this:
PIECES x COST = SUBTOTAL
[ 7 |V] $[ 8 ] $[ 56 ]
PIECES x COST = SUBTOTAL
[ 4 |V] $[ 10 ] $[ 40 ]
PIECES x COST = SUBTOTAL
[ 11 |V] $[ 6 ] $[ 66 ]
With JavaScript, change the cost field based on the pieces selection. Example with jQuery
<select id="pieces">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
etc..
</select>
<input id="cost"></input>
<input id="subtotal"></input>
<script>
$('#pieces').on('change', function() {
var pieces = $('#pieces').val(),
price;
if (pieces < 6) {
price = 10;
$('#cost').val(price);
$('#subtotal').val(pieces * price)}
}
if ((pieces > 5) && (pieces < 11)) {
price = 8;
$('#cost').val(price);
$('#subtotal').val(pieces * price)}
}
etc...
});