How to dynamically alter a value in mvc3 html page - html

Question

<tr>
<td>
Delivery
</td>
<td>
<div class="confdelivery">
<select id="NxtDay" name="NxtDay">
<option selected="selected" value="1">Normal Devliery + 10.00</option>
<option value="2">Next Day Delivery + 20.00</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
Total
</td>
<td>
#{
var total = Model.CartTotal;
}
#total
</td>
</tr>
Basically if a user selects next day delivery. I want 20 to be added to #total?

Answer 1

I thing you are going about this the wrong way. You either update some input value with javascript, or use the NxtDay value in your controller action to assign the correct value, depending on the selection.
ADDED:
What you want to do is something like this: (I am assuming you are using jquery, since it come with MVC3).
HOWEVER: You should check out some tutorial if you are starting. This is pretty basic stuff and you won't go far without having to come back here unless to read up on this sutff.
<tr>
<td>
Delivery
</td>
<td>
<div class="confdelivery">
<select id="NxtDay" name="NxtDay">
<option selected="selected" value="10">Normal Devliery + 10.00</option>
<option value="20">Next Day Delivery + 20.00</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
Total
</td>
<td>
<span id="totalValue" style="display: none">#Model.CartTotal</span>
<span id="totalWithShipping">0</span>
<input id="hiddenTotal" type="hidden" value="0">
</td>
</tr>
<script>
$(document).ready(function () {
$('#NxtDay').change(function() {
addToTotal();
});
});
function addToTotal(){
$('#totalWithShipping').html($('#totalValue').html() + $("#NxtDay option:selected").val());
$('#hiddenTotal').val($('#totalWithShipping').html());
}
</script>