I'm trying to build a calculator that does some simple math based on a number you input and a radio button you select. I want to pre populate the number and pre select the radio button and show a sample outcome. When I hard code the value of the text field it works until I try and change the new number then my output value flashes correctly and goes away. I know this is almost working but I cant seem to finish it off. My thought is maybe I should be pre-populating the text field using jquery but I'm not sure.
$(function() {
$(".calculate").change(function(){
var valone = $('#ms').val();
var valtwo = $('input:radio[name=ValTwo]:checked').val();
var total = ((valone * 1) * (valtwo * 1));
$('#Total').text(total);
});
});
<form>
<dl>
<dt><label for="spending">Monthly Spending</label></dt>
<dd><input name="ValOne" id="ms" type="text" value="2500"></dd>
<br /><br />
<dt><label for="balance">Is your balance typically<br />above $5,000?</label></dt>
<dd>
Yes <input name="ValTwo" type="radio" value=".02" class="calculate" checked='checked'>
No <input name="ValTwo" type="radio" value=".01" class="calculate">
</dd>
</dl>
<div class="clear"></div>
<input type="image" id="enter" value="open an account" src="images/btn-go.png">
</form>
<span id="Total">50</span>