im sorry but i tried everything that's available in the internet but all "solutions" doesnt work.
if the radio button is clicked, the textbox under that radio button will be enabled.else disabled.
pls help me with this.when i click the radio button, the textbox is still disabled.
js
function radioModeOfPayment(x){
if(document.getElementById('mMininum').checked == true){
document.getElementById("mMininum-amount").disabled = false;
document.getElementById("first").disabled = false;
document.getElementById("numMonth-months").disabled = true;
}
if(document.getElementById('numMonth').checked == true){
document.getElementById("numMonth-months").disabled = false;
document.getElementById("mMininum-amount").disabled = true;
document.getElementById("first").disabled = true;
}
}
html
<div class="trbl-padding-5">
<input type="radio" class="w3-radio" id="mMininum" name="mpayment" value="mMininum" onclick="radioModeOfPayment(this);"> <label class="w3-validate">Minimum Payment</label><br>
<input type="text" class="tlabel" readonly="true" value="Amount"> <input type="text" class="tlabel w3-border" disabled="disabled" id="mMininum-amount" name="mMininum-amount" value=""><br>
<input type="text" class="tlabel" readonly="true" value="Starting Date"> <input type="date" disabled="disabled" id="first" name="sdate"><br>
</div>
<div class="trbl-padding-5">
<input class="w3-radio" type="radio" id="numMonth" name="mpayment" value="numMonth" onclick="radioModeOfPayment(this);"> <label class="w3-validate">Number of Months</label><br>
<input type="text" class="tlabel" readonly="true" value="Months"> <input type="text" class="tlabel w3-border" readonly="true" id="numMonth-months" name="numMonth-months" value=""><br>
</div>
remove input text readonly attribute
function radioModeOfPayment(x) {
if (document.getElementById('mMininum').checked == true) {
document.getElementById("mMininum-amount").disabled = false;
document.getElementById("first").disabled = false;
document.getElementById("numMonth-months").disabled = true;
}
if (document.getElementById('numMonth').checked == true) {
document.getElementById("numMonth-months").disabled = false;
document.getElementById("mMininum-amount").disabled = true;
document.getElementById("first").disabled = true;
}
}
<div class="trbl-padding-5">
<input type="radio" class="w3-radio" id="mMininum" name="mpayment" value="mMininum" onclick="radioModeOfPayment(this);">
<label class="w3-validate">Minimum Payment</label>
<br>
<input type="text" class="tlabel" readonly="true" value="Amount">
<input type="text" class="tlabel w3-border" disabled="disabled" id="mMininum-amount" name="mMininum-amount" value="">
<br>
<input type="text" class="tlabel" readonly="true" value="Starting Date">
<input type="date" disabled="disabled" id="first" name="sdate">
<br>
</div>
<div class="trbl-padding-5">
<input class="w3-radio" type="radio" id="numMonth" name="mpayment" value="numMonth" onclick="radioModeOfPayment(this);">
<label class="w3-validate">Number of Months</label>
<br>
<input type="text" class="tlabel" readonly="true" value="Months">
<input type="text" class="tlabel w3-border" id="numMonth-months" name="numMonth-months" value="">
<br>
</div>
EDIT 2
In Snippet 2 it is exactly the same as OP's layout. By adding nth-of-type, the inputs on the right-side are the only inputs that are enabled and disabled while the ones on the left are unaffected. The attribute disabled and have been removed.
EDIT
Sorry forgot OP wants radio buttons, it works just as well.
Here's a simple CSS only solution.
This uses:
adjacent sibling selector
pointer-events
SNIPPET 1
.chx:checked + input {
pointer-events: none;
}
.chxs:checked ~ input {
pointer-events: none
}
input[name="rad"]:checked + input[type="text"] {
pointer-events: none;
}
<p>This example uses + which affects only the sibling that's immediately after .chx</p>
<input class='chx' type='checkbox'>
<input>
<br/>
<br/>
<p>This example uses ~ which affects all siblings that follow .chxs</p>
<input class='chxs' type='checkbox'>
<input>
<input>
<input>
<br/>
<br/>
<p>Works on radio buttons as well</p>
<fieldset>
<input name='rad' type='radio'>
<input type='text'>
</fieldset>
<fieldset>
<input name='rad' type='radio'>
<input type='text'>
</fieldset>
SNIPPET 2
.w3-radio:checked ~ input:nth-of-type(2n-1) {
pointer-events: none;
}
<div class="trbl-padding-5">
<input type="radio" class="w3-radio" id="mMininum" name="mpayment" value="mMininum">
<label class="w3-validate">Minimum Payment</label>
<br>
<input type="text" class="tlabel" readonly=true value="Amount">
<input type="text" class="tlabel w3-border" id="mMininum-amount" name="mMininum-amount" value="">
<br>
<input type="text" class="tlabel" readonly=true value="Starting Date">
<input type="date" id="first" name="sdate">
<br>
</div>
<div class="trbl-padding-5">
<input class="w3-radio" type="radio" id="numMonth" name="mpayment" value="numMonth">
<label class="w3-validate">Number of Months</label>
<br>
<input type="text" class="tlabel" readonly=true value="Months">
<input type="text" class="tlabel w3-border" id="numMonth-months" name="numMonth-months" value="">
<br>
</div>
Related
I have 5 radio buttons in one form and 5 input type hidden values corresponding to each radio button. By default, the value of radio buttons and hidden values are 0. Now, I want to change the selected radio button value and its corresponding hidden value to 1. Also, if I re-change the selected radio button then it should make the old selected radio button value and corresponding hidden value to 0 and make the newly selected radio button value and its corresponding button value to 1. I'm able to change the value of selected to radio button and its corresponding hidden value to 1, but if I re-select to another radio button it's not changing the old hidden value to 0 and new hidden value to 1.
$('input[type=radio][name=correctanswer]').on('change', function() {
if ($(this).prop('checked', true)) {
$(this).val('1');
// $('#correct').val($(this).val());
}
$('input:radio').each(function() {
if($(this).is(':checked')) {
$(this).val('1');
// $('#correct').val($(this).val());
}
else {
$(this).val('0');
// $('#correct').val($(this).val());
}
});
$('input:hidden').each(function() {
if($('input[type=radio][name=correctanswer]').is(':checked')) {
// $(this).val('1');
$('#correct').val('1');
}
else {
$(this).val('0');
$('#correct').val('0');
}
});
});
<form action="#" th:action="#{/saveQuestionAnswer}" th:object="${question}" method="post">
<div class="form-group">
<label for="question" class="control-label">Question</label>
<textarea type="text" name="question" cols="40" rows="5" th:name="question" placeholder="question" class="form-control"></textarea>
</div>
<div class="form-group">
<input class="form-control-input" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="hidden" name="correct" id="correct" value="0"><input type="text" size="30" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 1" />
</div>
<div class="form-group">
<input class="form-control-input" width="5" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="hidden" name="correct" id="correct" value="0"><input type="text" size="40" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 2" />
</div>
<div class="form-group">
<input class="form-control-input" width="5" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="hidden" name="correct" id="correct" value="0"><input type="text" size="40" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 3" />
</div>
<div class="form-group">
<input class="form-control-input" width="5" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="hidden" name="correct" id="correct" value="0"><input type="text" size="40" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 4" />
</div>
<div class="form-group">
<input class="form-control-input" width="5" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="hidden" name="correct" id="correct" value="0"><input type="text" size="40" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 5" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Save</button>
</div>
</form>
You can loop through your radio buttons using each loop then use .closest() to get the closest div to that radio and if that radio is checked assign value to input-box either1 or 0.
Demo Code :
$('input[type=radio][name=correctanswer]').on('change', function() {
//loop through each radio
$('input:radio').each(function() {
//if checked
if ($(this).is(':checked')) {
//get closest div with class=form-group and add value to input
$(this).closest(".form-group").find("input[name=correct]").val('1');
} else {
//add 0
$(this).closest(".form-group").find("input[name=correct]").val('0');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" th:action="#{/saveQuestionAnswer}" th:object="${question}" method="post">
<div class="form-group">
<label for="question" class="control-label">Question</label>
<textarea type="text" name="question" cols="40" rows="5" th:name="question" placeholder="question" class="form-control"></textarea>
</div>
<div class="form-group">
<input class="form-control-input" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="text" name="correct" id="correct" value="0"><input type="text" size="30" class="form-control" name="options" width="50"
value="" th:name="options" placeholder="Option 1" />
</div>
<div class="form-group">
<input class="form-control-input" width="5" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="text" name="correct" id="correct" value="0"><input type="text" size="40" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 2" />
</div>
<div class="form-group">
<input class="form-control-input" width="5" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="text" name="correct" id="correct" value="0"><input type="text" size="40" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 3" />
</div>
<div class="form-group">
<input class="form-control-input" width="5" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="text" name="correct" id="correct" value="0"><input type="text" size="40" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 4" />
</div>
<div class="form-group">
<input class="form-control-input" width="5" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="text" name="correct" id="correct" value="0"><input type="text" size="40" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 5" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Save</button>
</div>
</form>
A little problem that anyone but me can solve with ignorance of JS.
I open various divs after clicking on the payment method, according to the frequency of payments. I also open a div with text inputs.
The problem is that the used JS is applied to everything. So if by input (radio) unpack the div, another independent input (radio) closes it.
Also, if I unpack a div with other radio inputs by input, clicking on any of the divs will close the div again.
Here fiddle - jsfiddle.net/72jzy8gb
$(document).ready(function() {
$('input[type="radio"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".ukaz").not(targetBox).hide();
$(targetBox).show();
});
});
.ukaz {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-daruj" action="https://www.darujme.cz/darovat/1320" id="myForm" method="get">
<table class="daruj-form">
<tr>
<td colspan="2" style="text-align:center;font-size:25px;">
<b style="color:#dd4814;">Částka dobrovolného příspěvku</b><br />
</td>
</tr>
<tr>
<td style="text-align:-webkit-right;"><div style="width:147px;" id="castka">
<input name="amount" type="number" style="width: 100px;" value="100"> <span style="display:inline;">Kč</span></div><br /><input name="currency" type="hidden" value="CZK">
<input name="locale" type="hidden" value="cs"></td>
<td style="vertical-align:top;text-align:-webkit-left;"><div class="castky" style="
margin-top: 6px;"><input type="radio" name="frequency" value="once"><div id="jednorazove" style="font-size:13px;color:black;font-weight:bold;display: inline;padding-left: 5px;vertical-align: super;">Jednorázově</div><br>
<input type="radio" name="frequency" value="monthly"> <div id="mesicne" style="padding-left:2px;font-size:13px;color:black;font-weight:bold;display: inline;vertical-align: super;"> Měsíčně</div></div></td>
</tr>
<tr>
<td style="width:50%;">
<input name="firstName" type="text" placeholder="Jméno"><br>
<input name="lastName" type="text" placeholder="Příjmení"><br>
<input name="email" type="email" placeholder="Váš email"><br>
<input name="phone" type="number" placeholder="Telefonní číslo"><br>
<br>
<b>Požadujete potvrzení o daru?</b><br>
<input type="radio" name="wantDonationCertificate" value="1" nazev="adresa"> Ano<br>
<input type="radio" name="wantDonationCertificate" value="0" checked=""> Ne<br>
</td>
<td><div class="1 ukaz">
<input name="street" type="text" placeholder="Ulice a číslo popisné"><br>
<input name="city" type="text" placeholder="Obec/město"><br>
<input name="postcode" type="text" placeholder="PSČ"><br>
</div>
<br>
<div class="once ukaz">
<b>Výběr platby:</b><br>
<input type="radio" name="paymentMethod" value="proxypay_charge"> Platba kartou<br>
<input type="radio" name="paymentMethod" value="funds_transfer"> Platba převodem<br>
<input type="radio" name="paymentMethod" value="payu_transfer"> Online platba PayU
</div>
<div class="monthly ukaz">
<b>Výběr platby:</b><br>
<input type="radio" name="paymentMethod" value="proxypay_charge"> Platba kartou<br>
<input type="radio" name="paymentMethod" value="funds_transfer"> Platba převodem
</div>
<b>Chcete zasílat aktuality na email?</b><br>
<input type="radio" name="custom[souhlas_se_zasilanim_novinek_svobody_zvirat_a_se_zpracovanim_osobnich_udaju_pro_tyto_ucely]" value="1" checked=""> Ano<br>
<input type="radio" name="custom[souhlas_se_zasilanim_novinek_svobody_zvirat_a_se_zpracovanim_osobnich_udaju_pro_tyto_ucely]" value="0"> Ne<br>
<input type="submit" value="Odeslat">
</td>
</tr>
</table>
</form>
This is undesirable behavior.
Thanks for help!
You should use an indicator that points on a specific element but not a group of elements.
I used a name of input instead of a type here:
$(document).ready(function() {
$('input[name="wantDonationCertificate"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".ukaz").not(targetBox).hide();
$(targetBox).show();
});
});
I have 3 inputs:
<label for="text1">Text 1</label>
<input type="text" class="text1" value="To clear"><br>
<label for="text2">Text 2</label>
<input type="text" class="text2" value="to select"><br>
<label for="text3">Text 3</label>
<input type="text" class="text3" value="Click in this field">
I would like that when you click in the text3, it erases the text1.
I did a function but it does not work:
<script>
function myFunction(text3) {
document.text1.value = "";
}
</script>
The correct way of doing this is to assign an event listener to the element, within that you can call your function
function myFunction() {
document.querySelector('input.text1').value = "";
}
document.querySelector('input.text3').addEventListener('focus', myFunction);
<label for="text1">Text 1</label>
<input type="text" class="text1" value="To clear"><br>
<label for="text2">Text 2</label>
<input type="text" class="text2" value="to select"><br>
<label for="text3">Text 3</label>
<input type="text" class="text3" value="Click in this field">
Make sure to select your elements with DOM methods like querySelector, getElement(s)By... and so on. Never rely on accessing an element by it's global id as this may break depending on used browser. (Though document.text1.value = ""; will never work..)
var text1 = document.querySelector('.text1');
var text3 = document.querySelector('.text3');
text3.addEventListener('focus', myFunction);
function myFunction() {
text1.value = '';
}
<label for="text1">Text 1</label>
<input type="text" class="text1" value="To clear"><br>
<label for="text2">Text 2</label>
<input type="text" class="text2" value="to select"><br>
<label for="text3">Text 3</label>
<input type="text" class="text3" value="Click in this field">
You can do it very easily using JQuery .
$('.text3').on('focus', function() {
$('.text1').val('');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label for="text1">Text 1</label>
<input type="text" class="text1" value="To clear"><br>
<label for="text2">Text 2</label>
<input type="text" class="text2" value="to select"><br>
<label for="text3">Text 3</label>
<input type="text" class="text3" value="Click in this field">
I am trying to show an error if a user presses submit and doesn't check one of the radio buttons. That part works fine. Now, my issue is that even when the radio button is checked and the user presses the button.. the error shows right before the form submits. Why is that error showing when the radio button is checked? Any help will be appreciated.
HTML:
<form action="javascript:void(0);">
<input type="submit" class="add-cart " value="Add">
<br />
<p class="option-name">Size : </p>
<input type="radio" required="required" aria-required="true" id="product1" value="1" name="options[]" />
<label class="label" for="product1">Small</label>
<input type="radio" required="required" aria-required="true" id="product3" value="3" name="options[]" />
<label class="label" for="product3">Medium</label>
<input type="radio" required="required" aria-required="true" id="product4" value="4" name="options[]" />
<label class="label" for="product4">Large</label>
<input type="radio" required="required" aria-required="true" id="product5" value="5" name="options[]" />
<label class="label" for="product5">X-Large</label>
</form>
JS:
$(document).ready(function() {
var count = 0;
$(".add-cart").click(function() {
if (!$("input[name='options']").is(':checked') && count <= 0) {
$(".option-name").append("<p class='option-error'>This field is required</p>");
count++;
}
});
});
JSFiddle Demo
You're not currently resetting between uses, here's a new version:
$(document).ready(function() {
$(".add-cart").click(function() {
$(".option-error").html("");
if (!$("input[name='options[]']:checked").val()) {
$(".option-error").html("This field is required");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="javascript:void(0);">
<input type="submit" class="add-cart " value="Add">
<br />
<p class="option-name">Size : <p class="option-error"></p></p>
<input type="radio" required="required" aria-required="true" id="product1" value="1" name="options[]" />
<label class="label" for="product1">Small</label>
<input type="radio" required="required" aria-required="true" id="product3" value="3" name="options[]" />
<label class="label" for="product3">Medium</label>
<input type="radio" required="required" aria-required="true" id="product4" value="4" name="options[]" />
<label class="label" for="product4">Large</label>
<input type="radio" required="required" aria-required="true" id="product5" value="5" name="options[]" />
<label class="label" for="product5">X-Large</label>
</form>
I am using jQuery and I need to pass different values of same text box on different radio button clicks like text box name actual has four different values on selecting the different radio buttons how can I pass this?
<script type="text/javascript" src="jquery.min2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#loads').closest('div').hide();
$('#units').val('0');
$('input[name="myradio"]').change(function(){
if($('input[name="myradio"]:checked').val() == '100')
$('#loads').closest('div').hide();
else
$('#loads').closest('div').show();
});
$('input[readonly]').each(function(){
$(this).val('0');
});
$('#actual').val('2.56');
$("input:radio[name=myradio], #btn-calculate").click(function() {
if ($('input[name=myradio]:radio:checked').val() == '100'){
$('#actual').val('2.56');
$('#charges').val('20');
} else if ($('input[name=myradio]:radio:checked').val() == '200'){
$('#actual').val('3.50');
$('#charges').val('40');
} else if ($('input[name=myradio]:radio:checked').val() == '300'){
$('#actual').val('4.50');
$('#charges').val('60');
} else if ($('input[name=myradio]:radio:checked').val() == '400'){
$('#actual').val('5.50');
$('#charges').val('80');
}
$('#tax').val(($('#units').val())*($('#actual').val()));
$('#elec').val(($('#units').val())*($('#actual').val()));
$('#amount').val(parseInt(($('#charges').val()))+parseInt(($('#actual').val())));
$('#govt').val(($('#actual').val())-($('#units').val()));
$('#result').val(($('#amount').val())-($('#govt').val()));
});
</script>
<form method="POST" name="form1">
<label>Select your category:</label>
<label class="radio">
<input type="radio" value="100" name="myradio" checked="checked" />Domestic</label>
<label class="radio">
<input type="radio" value="200" name="myradio" />a</label>
<label class="radio">
<input type="radio" value="300" name="myradio" />b</label>
<label class="radio">
<input type="radio" value="400" name="myradio" />c</label>
<div>
<label for="units">No of units(kwh) used</label>
<input type="text" name="units" id="units" />
</div>
<div>
<label for="loads">Connected loads(kwh)</label>
<input type="text" name="loads" id="loads" />
</div>
<div>
<label for="actual">Actual</label>
<input type="text" data-value="2.60" readonly="readonly" name="actual" id="actual" />
</div>
<div>
<label for="tax">Tax</label>
<input type="text" readonly="readonly" name="tax" id="tax" />
</div>
<div>
<label for="elec">Elec</label>
<input type="text" readonly="readonly" name="elec" id="elec" />
</div>
<div>
<label for="charges">Charges</label>
<input type="text" readonly="readonly" name="charges" id="charges" />
</div>
<div>
<label for="amount">Amount</label>
<input type="text" readonly="readonly" name="amount" id="amount" />
</div>
<div>
<label for="govt">Govt</label>
<input type="text" readonly="readonly" name="govt" id="govt" />
</div>
<div>
<label for="result">Result</label>
<input type="text" readonly="readonly" name="result" id="result" />
</div>
<button type="button" id="btn-calculate">Calculate</button>
</form>
Similarly I want this in text box name amount=charges+actual and in text box name govt=actual-units and in text box name result=amount-govt for above four radio button
jsFiddle of the code.
<!DOCTYPE html>
<head>
<style type="text/css">
div {
margin: 10px 0;
}
div label {
width: 140px;
display: inline-block;
text-align: right;
}
input[readonly] {
background: #eee;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#loads').closest('div').hide();
$('#units').val('0');
$('input[name="myradio"]').change(function(){
if($('input[name="myradio"]:checked').val() == '100')
$('#loads').closest('div').hide();
else
$('#loads').closest('div').show();
});
$('input[readonly]').each(function(){
$(this).val('0');
});
$('#actual').val('2.56');
$("input:radio[name=myradio], #btn-calculate").click(function() {
if ($('input[name=myradio]:radio:checked').val() == '100'){
$('#actual').val('2.56');
$('#charges').val('20');
} else if ($('input[name=myradio]:radio:checked').val() == '200'){
$('#actual').val('3.50');
$('#charges').val('40');
} else if ($('input[name=myradio]:radio:checked').val() == '300'){
$('#actual').val('4.50');
$('#charges').val('60');
} else if ($('input[name=myradio]:radio:checked').val() == '400'){
$('#actual').val('5.50');
$('#charges').val('80');
}
$('#tax').val(($('#units').val())*($('#actual').val()));
$('#elec').val(($('#units').val())*($('#actual').val()));
$('#amount').val(parseInt(($('#charges').val()))+parseInt(($('#actual').val())));
$('#govt').val(($('#actual').val())-($('#units').val()));
$('#result').val(($('#amount').val())-($('#govt').val()));
});
});
</script>
</head>
<body>
<form method="POST" name="form1">
<label>Select your category:</label>
<label class="radio">
<input type="radio" value="100" name="myradio" checked="checked" />Domestic</label>
<label class="radio">
<input type="radio" value="200" name="myradio" />a</label>
<label class="radio">
<input type="radio" value="300" name="myradio" />b</label>
<label class="radio">
<input type="radio" value="400" name="myradio" />c</label>
<div>
<label for="units">No of units(kwh) used</label>
<input type="text" name="units" id="units" />
</div>
<div>
<label for="loads">Connected loads(kwh)</label>
<input type="text" name="loads" id="loads" />
</div>
<div>
<label for="actual">Actual</label>
<input type="text" data-value="2.60" readonly="readonly" name="actual" id="actual" />
</div>
<div>
<label for="tax">Tax</label>
<input type="text" data-value="0.00" readonly="readonly" name="tax" id="tax" />
</div>
<div>
<label for="charges">Charges</label>
<input type="text" data-value="20.00" readonly="readonly" name="charges" id="charges" />
</div>
<div>
<label for="amount">Amount</label>
<input type="text" data-value="2.60" readonly="readonly" name="amount" id="amount" />
</div>
<div>
<label for="govt">Govt</label>
<input type="text" data-value="2.60" readonly="readonly" name="govt" id="govt" />
</div>
<div>
<label for="result">Result</label>
<input type="text" readonly="readonly" name="result" id="result" />
</div>
<button type="button" id="btn-calculate">Calculate</button>
</form>
</body>
</html>
simply use click events for each of the radio buttons;
<input type="radio" value="200" name="myradio" id="radio_A"/>a
$('#radio_A').on('click', function() { $('#actual').val(somevalue); });
http://jsfiddle.net/c9sHt/32/