Show/Hide divs based on radio button selection - javascript

I've gotten as far as showing a certain div based on the selection of "150" and "3m" but I can't get the div to hide if both of those aren't selected?
Code below:
$(document).ready(function() {
$('input[value="100"], input[value="3m"]').change(function() {
if ($('input[value="100"]').is(':checked') && $('input[value="3m"]').is(':checked')) {
$('div').show();
} else {
$('div').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>100</label>
<input class="amount" type="radio" name="amount" value="100" />
<label>150</label>
<input class="amount" type="radio" name="amount" value="150" />
<br>
<br>
<label>3</label>
<input class="month" type="radio" name="month" value="3m" />
<label>6</label>
<input class="month" type="radio" name="month" value="6m" />
<div style="display: none;">
<div class="interest">
£40
</div>
<div class="total-payable">
£140
</div>
<div class="monthly-payment">
£46.67
</div>
<div class="weekly-payment">
£10.77
</div>
</div>

Currently you're only updating the visibility of the div elements when the 100 or 3m radio button is changed - you want to update the visibility of the div elements on any radio button change by changing your selector:
$('input[value="100"], input[value="3m"]')
to
$('input')
$(document).ready(function() {
$('input').change(function() {
if ($('input[value="100"]').is(':checked') && $('input[value="3m"]').is(':checked')) {
$('div').show();
}
else {
$('div').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>100</label>
<input class="amount" type="radio" name="amount" value="100" />
<label>150</label>
<input class="amount" type="radio" name="amount" value="150" />
<br><br>
<label>3</label>
<input class="month" type="radio" name="month" value="3m" />
<label>6</label>
<input class="month" type="radio" name="month" value="6m" />
<div style="display: none;">
<div class="interest">
£40
</div>
<div class="total-payable">
£140
</div>
<div class="monthly-payment">
£46.67
</div>
<div class="weekly-payment">
£10.77
</div>
</div>

For radio buttons, the change event is only triggered when the button gets checked, not when it gets unchecked.
A possible solution is to bind the change event to all (involved) inputs.
$(document).ready(function() {
$('input').change(function() {
if ($('input[value="100"]').is(':checked') && $('input[value="3m"]').is(':checked')) {
$('div').show();
}
else {
$('div').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>100</label>
<input class="amount" type="radio" name="amount" value="100" />
<label>150</label>
<input class="amount" type="radio" name="amount" value="150" />
<br><br>
<label>3</label>
<input class="month" type="radio" name="month" value="3m" />
<label>6</label>
<input class="month" type="radio" name="month" value="6m" />
<div style="display: none;">
<div class="interest">
£40
</div>
<div class="total-payable">
£140
</div>
<div class="monthly-payment">
£46.67
</div>
<div class="weekly-payment">
£10.77
</div>
</div>

I would do it like the following using the filter function and the :checked selector:
// wrap in closure
$(function() {
// store these in variables for better performance
var month = $('.month'),
amount = $('.amount'),
toggleDiv = $('#toggle-div'); // give top level div to show an id rather than toggling all divs
// use common class on radios you want to bind the event to
$('.radio').on('change', function() {
if (amount.filter(':checked').val() == 100 && month.filter(':checked').val() === "3m") {
toggleDiv.show();
} else {
toggleDiv.hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>100</label>
<input class="amount radio" type="radio" name="amount" value="100" />
<label>150</label>
<input class="amount radio" type="radio" name="amount" value="150" />
<br>
<br>
<label>3</label>
<input class="month radio" type="radio" name="month" value="3m" />
<label>6</label>
<input class="month radio" type="radio" name="month" value="6m" />
<div id="toggle-div" style="display: none;">
<div class="interest">
£40
</div>
<div class="total-payable">
£140
</div>
<div class="monthly-payment">
£46.67
</div>
<div class="weekly-payment">
£10.77
</div>
</div>

You need to put all the radio buttons id or name to do the functionality
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>100</label>
<input class="amount" type="radio" name="amount" value="100" id="100rad"/>
<label>150</label>
<input class="amount" type="radio" id="150rad"name="amount" value="150" />
<br><br>
<label>3</label>
<input class="month" type="radio" id="3mrad" name="month" value="3m" />
<label>6</label>
<input class="month" type="radio" name="month" id="6mrad" value="6m" />
<div style="display: none;">
<div class="interest">
£40
</div>
<div class="total-payable">
£140
</div>
<div class="monthly-payment">
£46.67
</div>
<div class="weekly-payment">
£10.77
</div>
</div>
js
$(document).ready(function() {
$('#3mrad, #150rad,#100rad,#6mrad').change(function() {
if ($('#150rad').is(':checked') && $('#3mrad').is(':checked')) {
$('div').show();
}
else {
$('div').hide();
}
});
});
check the fiddle and let me know that it is what you required or not
Fiddle

$(document).ready(function(){
$("input[type='button']").click(function(){
var radioValue = $("input[name='gender']:checked").val();
if(radioValue){
alert("Your are a - " + radioValue);
}
});
if(radioValue=='male'){
$("#divMale").show();
$("#divFemale").hide();
}
else{
$("#divMale").hide();
$("#divFemale").show();
}
});

Use the following javascript code instead. . .set change listener on input[name="month"], input[name="amount"]
$(document).ready(function() {
$('input[name="month"], input[name="amount"]').change(function() {
console.log("haha")
if ($('input[value="100"]').is(':checked') && $('input[value="3m"]').is(':checked')) {
$('div').show();
}
else {
$('div').hide();
}
});
});

If you are using bootstrap css, you can even make the code much more portable.
$(document).ready(function () {
$('input.rbtoggle').change(function () {
$('div.dvtoggle').toggleClass('d-none');
});
});
where 'rbtoggle' is just a class your radio buttons share, while 'dvtoggle' is a class the div to show or hide uses.
If you want the div hidden initially, add the class 'd-none' to it. E.g
<div class'dvtoggle d-none'>
<!-- other html goes here -->
</div>

Related

How to enable/disable next input field

I am trying to enable disable very next input field with check uncheck of a closest checkbox.
I tried the following script.
$(document).on('change', '.check:checkbox', function(){
if (this.checked) {
$(this).next().prop('disabled', false);
}else{
$(this).next(".inputs").prop("disabled", true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class"one">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class"two">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class"three">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
As your HTML stands, .next() points to the label element.
You should first target the closest div then find the respective element from that div element:
$(this).closest('div').find('.inputs')
$(document).on('change', '.check:checkbox', function(){
var currentEl = $(this).closest('div').find('.inputs');
if (this.checked) {
currentEl.prop('disabled', false);
}else{
currentEl.prop("disabled", true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class"one">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class"two">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class"three">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
$(this).next() is the <label>, and next after that is <br>.
Use .nextAll() to get all the following siblings that match a selector, and .first() to get the first one of these.
$(document).on('change', '.check:checkbox', function() {
let nextinput = $(this).nextAll(".inputs").first();
nextinput.prop('disabled', !this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class "one">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class "two">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class "three">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
You should change the <label>, wrapping the checkbox. This will improve the user experience. Then change the jQuery selector to $(this).closest("div").find(".inputs") in order to address the right input element.
$(document).on('change', '.check:checkbox', function(){
$(this).closest("div").find(".inputs").prop('disabled',!this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class"one">
<label><input type="checkbox" class="check">
Enable/Disable</label><br>
<input type="text" class="inputs" disabled value="a">
</div>
<div class"two">
<label><input type="checkbox" class="check">
Enable/Disable</label><br>
<input type="text" class="inputs" disabled value="b">
</div>
<div class"three">
<label><input type="checkbox" class="check">
Enable/Disable</label><br>
<input type="text" class="inputs" disabled value="c">
</div>
You are almost there. next() element is not input, it's label so why your code is fail. You can increase the next()(next().next()...) until you find proper element.
There are several way to find desire input to enable/disable. If your DOM is not changeable and there are only 1 sibling input use siblings('input').
Example:
$(document).on('change', '.check:checkbox', function() {
if (this.checked) {
$(this).siblings('input').prop('disabled', false);
} else {
$(this).siblings(".inputs").prop("disabled", true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class "one">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class "two">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class "three">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>

Checkbox checked works only once

Message sending form, the customer has to select at least one of the alternatives (mail, SMS).
Send button would be disabled if none is selected and activate if one or both selected
$(document).ready(function() {
$('.form-check-input').change(function() {
$(this).each(function() {
if (!$(this).is(':checked')) {
$("#send").attr("disabled", "disabled");
}
});
});
});
<div>
<div class="row">
<div class="col-md-12 form-check">
<div>
<input class="form-check-input" type="checkbox" value="" id="Epost" checked>
<label class="form-check-label" for="E-post">E-post</label>
</div>
<div>
<input class="form-check-input" type="checkbox" value="" id="SMS">
<label class="form-check-label" for="SMS">SMS</label>
</div>
<br>
<button id='send'>Send</button>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The issue is because your current logic does not deal with checkboxes being re-checked.
You can solve the problem by inverting the logic so that the disabled property is updated on every checkbox change, and is determined by the length of the checked boxes:
var $checkboxes = $('.form-check-input').change(function() {
$('#send').prop('disabled', function() {
return $checkboxes.filter(':checked').length == 0;
});
});
<div>
<div class="row">
<div class="col-md-12 form-check">
<div>
<input class="form-check-input" type="checkbox" value="" id="Epost" checked>
<label class="form-check-label" for="E-post">E-post</label>
</div>
<div>
<input class="form-check-input" type="checkbox" value="" id="SMS">
<label class="form-check-label" for="SMS">SMS</label>
</div>
<br>
<button id='send'>Send</button>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can do it like this:
$('.form-check-input').change(function() {
$("#send").prop("disabled", ($('.form-check-input:checked').length == 0 ? true : false));
});
This will disable the button if none of the checkbox are checked.
Demo
$(document).ready(function() {
$('.form-check-input').change(function() {
$("#send").prop("disabled", ($('.form-check-input:checked').length == 0 ? true : false));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="row">
<div class="col-md-12 form-check">
<div>
<input class="form-check-input" type="checkbox" value="" id="Epost" checked>
<label class="form-check-label" for="E-post">
E-post
</label>
</div>
<div>
<input class="form-check-input" type="checkbox" value="" id="SMS">
<label class="form-check-label" for="SMS">
SMS
</label>
</div>
<br>
<button id='send'>Send</button>
</div>
</div>
</div>
You never enable the button again. There is just a disable instruction.
I would disable it by default at beginning and then enable it if any of the checkboxes is checked.
$(document).ready(function() {
$('.form-check-input').change(function() {
$("#send").attr("disabled", "disabled");
$(this).each(function() {
if ($(this).is(':checked')) {
$("#send").removeAttr("disabled");
}
});
});
});
<div>
<div class="row">
<div class="col-md-12 form-check">
<div>
<input class="form-check-input" type="checkbox" value="" id="Epost" checked>
<label class="form-check-label" for="E-post">E-post</label>
</div>
<div>
<input class="form-check-input" type="checkbox" value="" id="SMS">
<label class="form-check-label" for="SMS">SMS</label>
</div>
<br>
<button id='send'>Send</button>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(document).ready(function() {
$('.form-check-input').change(function() {
let hasChecked = false;
$('.form-check-input').each(function() {
if ($(this).is(':checked')) {
hasChecked = true;
}
});
$("#send").attr("disabled", !hasChecked);
});
});
<div>
<div class="row">
<div class="col-md-12 form-check">
<div>
<input class="form-check-input" type="checkbox" value="" id="Epost" checked>
<label class="form-check-label" for="E-post">E-post</label>
</div>
<div>
<input class="form-check-input" type="checkbox" value="" id="SMS">
<label class="form-check-label" for="SMS">SMS</label>
</div>
<br>
<button id='send'>Send</button>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Correct your logic. Once disabled you are not enabling again when checked.
$(document).ready(function() {
$('.form-check-input').change(function() {
$(this).each(function() {
if (!$(this).is(':checked')) {
$("#send").attr("disabled", true);
}else{
$("#send").attr("disabled", false);
}
});
});
});
Blockquote

Show certain element by clicking anchor

How do I show only one input at a time?
For example, if user clicks anchor #3, he sees input with content "1".
My guess was something like this:
$(".unit a").click(function() {
$(this).toggleClass("active");
$('input').toggle(); // ??
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='amount amount-piece'>
<input type="text" name="amount2" id="amount2" value="7" data-rate="7" readonly="readonly" />
</div>
<div class='amount amount-square'>
<input data-rate="1.25" readonly="readonly" type="text" value="1.25" name="basket[amount]" id="basket_amount" />
</div>
<div class='amount amount-box'>
<input type="text" name="amount3" id="amount3" value="1" data-rate="1" readonly="readonly" />
</div>
<div class='unit'>
#1
#2
#3
</div>
However it's not working.
https://jsfiddle.net/jjrLgpjp/
To achieve this you need to hide() all the input before showing the one related to the clicked <a> element. You can match them up by their index(), using eq(). Try this:
$(".unit a").click(function() {
var index = $(this).toggleClass("active").index();
$('input').hide().eq(index).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="amount amount-piece">
<input type="text" name="amount2" id="amount2" value="7" data-rate="7" readonly="readonly" />
</div>
<div class="amount amount-square">
<input type="text" name="basket[amount]" id="basket_amount" value="1.25" data-rate="1.25" readonly="readonly" />
</div>
<div class="amount amount-box">
<input type="text" name="amount3" id="amount3" value="1" data-rate="1" readonly="readonly" />
</div>
<div class="unit">
#1
#2
#3
</div>
You can do it by adding a attribute (for Eg: for="#one") to your inputs as per the anchor ID and then later select accordingly
$( ".unit a" ).click(function() {
$( this ).toggleClass( "active" );
// $('input').toggle(); // ??
$('input').hide();
$('input[for="#'+ $( this ).attr('id')+'"]').show();
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='amount amount-piece'>
<input type="text" name="amount2" id="amount2" for ="#one" value="7" data-rate="7" readonly="readonly" />
</div>
<div class='amount amount-square'>
<input data-rate="1.25" readonly="readonly" type="text" for ="#sec" value="1.25" name="basket[amount]" id="basket_amount" style ="display:none;" />
</div>
<div class='amount amount-box'>
<input type="text" name="amount3" id="amount3" for ="#thd" value="1" data-rate="1" readonly="readonly" style ="display:none;"/>
</div>
<div class='unit'>
#1
#2
#3
</div>
Another alternative, you can use data attribute:
$( ".unit a" ).click(function(e) {
e.preventDefault();
$(this).toggleClass( "active" );
$('.'+$(this).data("target")).show().siblings().not($(this).parent()).hide();
});
.amount:not(:first-child){
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class='amount amount-piece'>
<input type="text" name="amount2" id="amount2" value="7" data-rate="7" readonly="readonly" />
</div>
<div class='amount amount-square'>
<input data-rate="1.25" readonly="readonly" type="text" value="1.25" name="basket[amount]" id="basket_amount" />
</div>
<div class='amount amount-box'>
<input type="text" name="amount3" id="amount3" value="1" data-rate="1" readonly="readonly" />
</div>
<div class='unit'>
<a data-target="amount-piece" href="#">#1</a>
<a data-target="amount-square" href="#">#2</a>
<a data-target="amount-box" href="#">#3</a>
</div>

how to enable textbox ,when uncheck a checkbox using javascript

I have 5 teachers names and corresponding checkboxes(5) I am using checkall function to check all check boxes.
now I want ,when I uncheck a checkbox now enable a textbox at right side.
how to create a textbox from unchecked function using javascript?
my code is :
HTML + PHP :
<input type="checkbox" class="check form-control" id="checkFull">
<div class="form-group{{ ($errors->has('check')) ? 'has error' : '' }}">
<label for="check" class="col-sm-4 control-label">{{$teacher->tname}}:</label>
<div class="col-sm-4">
<input type="hidden" id="{{$teacher->user_id}}" name="{{$teacher->user_id}}" value="0">
<input id="{{$teacher->user_id}}" name="{{$teacher->user_id}}" type="checkbox" value="1" class="check form-control">
</div>
<div class="col-sm-4">
<input type="text" class="textBox">
</div>
</div>
JAVASCRIPT :
$("#checkFull").click(function() {
$(".check").prop('checked', $(this).prop('checked'));
});
what is the javascript code to enable textbox?
function changeTextBoxFormCheckBox($elm){
var $textBox= $elm.closest(".form-group").find("input[type='text']");
if($elm.is(":checked")){
$textBox.attr("disabled",true);
}else{
$textBox.attr("disabled",false);
}
}
$(".checkbox").each(function(){
changeTextBoxFormCheckBox($(this));
})
$("#checkFull").click(function () {
var checkAllProp= $(this).prop('checked');
$(".checkbox").each(function(){
var $this=$(this);
$this.prop('checked', checkAllProp);
changeTextBoxFormCheckBox($(this));
})
});
$(".checkbox").click(function () {
changeTextBoxFormCheckBox($(this));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" class="check form-control" id="checkFull">
<div class="form-group {{ ($errors->has('check')) ? 'has error' : '' }}">
<label for="check" class="col-sm-4 control-label">tname:</label>
<div class="col-sm-4">
<input type="hidden" id="{{$teacher->user_id}}" name="{{$teacher->user_id}}" value="0">
<input id="{{$teacher->user_id}}" name="{{$teacher->user_id}}" type="checkbox" value="1" class="check form-control checkbox">
</div>
<div class="col-sm-4">
<input type="text" class="textBox">
</div>
</div>
Format your html code as I mentioned. You can do change as per your need
$(document).on('change', '[type=checkbox]', function() {
if ($(this).is(":checked")) {
$("#textBox1").attr("disabled", "disabled");
} else {
$("#textBox1").removeAttr("disabled");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div class="col-sm-4 teacherContent">
<input type="hidden" id="teacherId1" name="teacherName1" value="0">
<input type="hidden" id="teacherId2" name="teacherName2" value="1">
<input id="teacherCheck_1" class="teacherCheck" name="teacherCheckName1" type="checkbox" value="1" class="check form-control">
<input id="teacherCheck_2" class="teacherCheck" name="teacherCheckName2" type="checkbox" value="1" class="check form-control">
</div>
<div class="col-sm-4">
<input type="text" id="textBox1">
</div>
</div>
$(document).on('change', '[type=checkbox]', function() {
var val = $(this).data('value');
if ($(this).is(":checked")) {
$("#textBox"+val).attr("disabled", "disabled");
} else {
$("#textBox"+val).removeAttr("disabled");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div class="col-sm-4 teacherContent">
<input type="hidden" id="teacherId1" name="teacherName1" value="0">
<input type="hidden" id="teacherId2" name="teacherName2" value="1">
<input id="teacherCheck_1" data-value="1" name="teacherCheckName1" type="checkbox" class="check form-control">
<input type="text" id="textBox1">
<input id="teacherCheck_2" data-value="2" class="teacherCheck" name="teacherCheckName2" type="checkbox" class="check form-control">
<input type="text" id="textBox2">
</div>
</div>

How to get different values of text box in jQuery?

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/

Categories

Resources