I want to calculate the value of the 1st 2 text boxes without a mand button Example i have 3 text boxes.
The first 2, where the numbers will be inputed and the last 1 will be the sum or product and so on. Now i want it to auto pute. For example i have inputed values 2 and 3 on the 1st 2 text boxes then automatically the sum or product or whatever result will be displayed on the 3rd text box. How am i able to do this? Thanks
<html>
<head>
<script src=".11.1/jquery.min.js"></script>
<script>
$('#texttwo').keyup(function(){
var textone;
var texttwo;
textone = parseFloat($('#textone').val());
texttwo = parseFloat($('#texttwo').val());
var result = textone + texttwo;
$('#result').val(result.toFixed(2));
});
</script>
</head>
<body>
<input type="text" name="value1" id="textone">
<input type="text" name="value2" id="texttwo">
<input type="text" name="result" id="result">
</body>
</head>
I want to calculate the value of the 1st 2 text boxes without a mand button Example i have 3 text boxes.
The first 2, where the numbers will be inputed and the last 1 will be the sum or product and so on. Now i want it to auto pute. For example i have inputed values 2 and 3 on the 1st 2 text boxes then automatically the sum or product or whatever result will be displayed on the 3rd text box. How am i able to do this? Thanks
<html>
<head>
<script src="http://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('#texttwo').keyup(function(){
var textone;
var texttwo;
textone = parseFloat($('#textone').val());
texttwo = parseFloat($('#texttwo').val());
var result = textone + texttwo;
$('#result').val(result.toFixed(2));
});
</script>
</head>
<body>
<input type="text" name="value1" id="textone">
<input type="text" name="value2" id="texttwo">
<input type="text" name="result" id="result">
</body>
</head>
Share
Improve this question
edited Oct 17, 2014 at 10:42
MarcoL
9,9893 gold badges39 silver badges50 bronze badges
asked Oct 17, 2014 at 10:00
kristyan markeskristyan markes
371 gold badge2 silver badges8 bronze badges
3
- What you need is Javascript and possibly AJAX. – rr- Commented Oct 17, 2014 at 10:02
- Maybe you should read a javascript tutorial, this is really basics. – Leto Commented Oct 17, 2014 at 10:05
- can you give me some examples? or can you share a link pls? – kristyan markes Commented Oct 17, 2014 at 10:08
1 Answer
Reset to default 0You can achieve this by using jQuery.
Include jQuery in your project by putting this in your <head>
<script src="http://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Then, at the end of the file:
<script>
$('#texttwo').keyup(function(){
var textone;
var texttwo;
textone = parseFloat($('#textone').val());
texttwo = parseFloat($('#texttwo').val());
var result = textone + texttwo;
$('#result').val(result.toFixed(2));
});
</script>
This will give you the result when ever you change the value of the second box.
You will need to do this, too:
Change
<input type=text name=value1>
<input type=text name=value2>
<input type=text name=result>
to:
<input type="text" name="value1" id="textone">
<input type="text" name="value2" id="texttwo">
<input type="text" name="result" id="result">
EDIT
This is my entire file:
<script src="http://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="value1" id="textone">
<input type="text" name="value2" id="texttwo">
<input type="text" name="result" id="result">
<script>
$('#texttwo').keyup(function(){
var textone;
var texttwo;
textone = parseFloat($('#textone').val());
texttwo = parseFloat($('#texttwo').val());
var result = textone + texttwo;
$('#result').val(result.toFixed(2));
});
</script>