Question

so I have a very simple script I’m writing to be a calculator so clients can see how much a service will cost, and then update the result based on changes to the text inputs. problem is after the first go around it stops calculating the values correctly. Here it is, help appretiated.

<script>
$(function(){


var one=0;
var two=0;
var three=0;
$("input:text").change(function(){
if($(this).val() == $('#first').val())
{ 
 one = parseInt($(this).val());



}
 else if($(this).val() == $('#second').val()){

two = parseInt($(this).val());

 }
 else if($(this).val() == $('#third').val()){

three = parseInt($(this).val());

 }

});


$('input:text').change(function(){

$('#result').text(one+two+three);


});


});


</script>

and the form:

<div id="container">
<form action="something.html" id="subit">
<label for="first">put numbers</label><input type="text" id="first"/>
<label for="second">more numbers</label><input type="text" id="second" value="0"/>
<label for="third">and more numbers</label><input type="text" id="third" value="0"/>
<input type="submit" />
</form>
<div id="result"></>
</div>

Answer 1

Try this code

$(document).ready(function() {
    var textboxes = $("#container input:text");
    textboxes.on("keyup", function() {
        var amt = 0;
        textboxes.each(function() {
            amt += +$(this).val();
        });
        $("#result").html(amt);
    });
});​

Working Fiddle: http://jsfiddle.net/naveen/87p53/

---

As for your code, change these things in your code

a. Compare ids and not values, its much safer that way.
b. Remove the second change function. Not needed at all.

$(function() {
    var one = 0;
    var two = 0;
    var three = 0;
    $("input:text").change(function() {
        if (this.id == "first") {
            one = parseInt($(this).val());
        }
        else if (this.id == "second") {
            two = parseInt($(this).val());
        }
        else if (this.id == "third") {
            three = parseInt($(this).val());
        }
        $('#result').html(one + two + three);
    });
});​