Menu
My problem is simple not so lengthy as looking like.
I have 7 textboxes having ids text1, text2, text3, text4 and text5, text6, text7 and one checkbox having id check. I am getting value of text1 and text2 by JSON as 10 and 20 and displaing total 30 in text7. Values of text4,text5 and text6 are empty that is these textboxes display "0". text3 and text4 will be autofilled based on checkbox.
When i checked the checkbox then "Points" will be autofilled in text3 and "100" will be autofilled in text4. Now total text7 will show 130. Values of text5 and text6 display "0". If i will write something let's say "10" in text5 and "20" in text6 then total text7 will show 160. If i uncheck the checkbox, then values of text3 and text4 will be removed and total will be changed acordingly.I am not able to know how to autofill text3 and text4 after checking the checkbox, any idea please?
$(document).ready(function() {
$("#combo1").change(function() {
$.getJSON(
'combo1.jsp',
{ combo1Val : $(this).val() },
function(data) {
var a = data.valueoffirsttextbox; //Got 10 from db
var b = data.valueofsecondtextbox; //Got 20 from db
var total = parseInt(a) + parseInt(b);
$("#combo2").val(data.name);
$("#text1").val(a)
$("#text2").val(b)
$("#text7").val(total); // here i am showing total 30 in text7
}
);
// when checkbox is unchecked text4 is not present
$("#text1, #text2, #text5, #text6").keyup(function() {// if any editing occurs
in these values then total will be changed accordingly
var a = $("#text1").val();
var b = $("#text2").val();
var c = $("#text5").val();
var d = $("#text6").val();
var total = parseInt(a) + parseInt(b) + parseInt(c) + parseInt(d);
$("#text7").val(total);// shows total with out text4's value
// when checkbox is checked then text4's value is added
$("#text1, #text2, #text4, #text5, #text6").keyup(function() {// if any editing
occurs in these values then total will be changed accordingly
var a = $("#text1").val();
var b = $("#text2").val();
var c = $("#text5").val();
var d = $("#text6").val();
//here text4 is added
var e = $("#text4").val();
var total = parseInt(a) + parseInt(b) + parseInt(c) + parseInt(d) + parseInt(e) ;
$("#text7").val(total);// show total with text4's value
});
});
});
<body>
<input type="checkbox" id=check"/>
<input type="text" id="text1"/>
<input type="text" id="text2"/>
<input type="text" id="text3"/>// how can i autofill "POINTS" in this
textbox after checking the checkbox?
<input type="text" id="text4" value="0"/>//how can i autofill "100" in this textbox
after checking the checkbox?
<input type="text" id="text5" value="0"/>
<input type="text" id="text6" value="0"/>
<input type="text" id="text7" value="0"/>// shows total of all values of above
textboxes except text3
</body>
740
You can check this jsFiddle: http://jsfiddle.net/Af6LP/1/ Modify it according to your needs.
Script
$(document).ready(function() {
$("#check").change(function() {
if ($(this).is(":checked")) $("#text4").val("100");
else $("#text4").val("0");
calculate();
});
$("#text1, #text2, #text5, #text6").keyup(function() {
calculate();
});
});
function calculate() {
var a = $("#text1").val();
var b = $("#text2").val();
var c = $("#text5").val();
var d = $("#text6").val();
var total = parseInt(a) + parseInt(b) + parseInt(c) + parseInt(d);
if ($("#check").is(":checked")) total += parseInt($("#text4").val());
$("#text7").val(total);
}
HTML
<body>
<input type="checkbox" id="check"/><br/>
<input type="text" id="text1" value="10"/><br/>
<input type="text" id="text2" value="20"/><br/>
// how can i autofill "POINTS" in this textbox after checking the checkbox?
<input type="text" id="text3"/><br/>
//how can i autofill "100" in this textbox after checking the checkbox?
<input type="text" id="text4" value="0"/><br/>
<input type="text" id="text5" value="0"/><br/>
<input type="text" id="text6" value="0"/><br/>
// shows total of all values of above textboxes except text3<br/>
<input type="text" id="text7" value="30"/>
</body>
Take a look at this solution:
var a=10; // from database
var b=20; // from database
var e=0;
$("#text1").val(a); // read and set value
$("#text2").val(b); // read and set value
function getValues(){
a = parseInt($("#text1").val(), 10);
b = parseInt($("#text2").val(), 10);
var c = parseInt($("#text5").val(), 10);
var d = parseInt($("#text6").val(), 10);
doSomeCheck = $('#check').is(':checked') ? e=100 : e=0;
$('#text4').val(e);
$('#text3').val(a+b);
$("#text7").val(a+b+c+d+e);
}
getValues();
$("#check").change(function() {
getValues();
});
$("#text1, #text2, #text4, #text5, #text6").keyup(function() {
getValues();
if($(this).val() === '') $('#text7').val('...');
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
