What I am trying to do is getting the value from a group of radio buttons and output the value after a little calculation is a text field. I tried the codes below, but nothings seems to work. Sorry, but I don't have too much knowledge in jQuery/JavaScript and seeking help.
HTML:
<label for="ctype">
<b>Construction Type</b>
<table>
<tr><td>Timber:</td><td><input type="radio" name="ctype" value="Timber"></td></tr>
<tr><td>Brick:</td><td><input type="radio" name="ctype" value="Brick"></td></tr>
<tr><td>Concrete:</td><td><input type="radio" name="ctype" value="Concrete"></td></tr>
</table>
</label>
<!-- Roof Type -->
<label for="rtype">
<b>Roof Type</b>
<table>
<tr><td>Metal:</td><td><input type="radio" name="rtype" value="Metal"></td></tr>
<tr><td>Tile:</td><td><input type="radio" name="rtype" value="Tile"></td></tr>
<tr><td>Concrete:</td><td><input type="radio" name="rtype" value="Concrete"></td></tr>
</table>
</label>
<!-- Roof Insulation -->
<label for="rins">
<b>Insulation In Roof</b>
<table>
<tr><td>Yes:</td><td><input type="radio" name="rins" value="Yes"></td></tr>
<tr><td>No:</td><td><input type="radio" name="rins" value="No"></td></tr>
</table>
</label>
<table>
<tr><td><label for="cvars">Variables:</label></td><td><input type="text" name="cvars" class="cvars" value="0"> Squere Meters</td></tr>
<table>
JavaScript
/* Form Processing */
jQuery(document).ready(function() {
// Process Construction Type
jQuery('input:radio[name=ctype]').change(function() {
var ctype = $('input:radio[name=ctype]:checked').val();
if ( ctype == 'Timber' ) {
jQuery('.cvars').val( $('.cvars').val() + 2 );
} else if ( ctype == 'Brick' ) {
jQuery('.cvars').val( $('.cvars').val() + 1 );
} else if ( ctype == 'Concrete' ) {
jQuery('.cvars').val( $('.cvars').val() + 1 );
}
});
// Process Roof Type
jQuery('input:radio[name=rtype]').change(function() {
var ctype = $('input:radio[name=rtype]:checked').val();
if ( ctype == 'Metal' ) {
jQuery('.cvars').val( $('.cvars').val() + 4 );
} else if ( ctype == 'Tile' ) {
jQuery('.cvars').val( $('.cvars').val() + 0 );
} else if ( ctype == 'Concrete' ) {
jQuery('.cvars').val( $('.cvars').val() + 0 );
}
});
});
Basically, when someone selects the construction type, a value based on the type is automatically adjusted (added or substrated) in the text field named cvars. Similarly, when choosing the roof type, a value (adding to the current value) based on the type is adjusted to the vars text field and so on..
Please someone help me on this.