multiple input fields add into another input field that controls progress of a loading bar

Question

I have 4 input fields that when numbers are entered into one of the first 3 using jquery .keyup, they are totaled and added into the fourth. I also have a series of if else statements that run when a .keyup is entered into the fourth, they determine the value of the .keyup and draw a certain number of paths (bottles) to the raphael paper.

What I am wanting to do is when one of the first three values is entered I want the total of the fourth to be passed to the if else statments and decide how many paths (bottles) to be drawn to the raphael paper. Instead of having to type directly into the fourth input.

It seems that .keyup wont work for this unless the cursor is in the input field. What is another way to grab info from a input field that is being generated by a .text? is basically what I am looking for.

Hopefully this makes sense.

http://jsfiddle.net/anderskitson/QX9C7/

$('#the_input_id').keyup(function() {
    updateTotal();
});

$('#the_input_id1').keyup(function() {
    updateTotal();
});

$('#the_input_id2').keyup(function() {
    updateTotal();
});

var updateTotal = function() {
    var input1 = parseInt($('#the_input_id').val());
    var input2 = parseInt($('#the_input_id1').val());
    var input3 = parseInt($('#the_input_id2').val());
    if (isNaN(input1) || isNaN(input2) || isNaN(input3)) {
        $('#total').text('');
    } else {
        var max = 300;
        var total = input1 + (input2 * 2) + (input3 * 3);

        if (total > max) {
            $('#total').text('The maximum is ' + max);
            $('#total1').val(500);
        } else {

            $('#total1').val(total);
        }


    }
};
var default_val = '';
$('input[class^="class-"]').focus(function() {
    if ($(this).val() == $(this).data('default_val') || !$(this).data('default_val')) {
        $(this).data('default_val', $(this).val());
        $(this).val('');
    }
});

$('input[class^="class-"]').blur(function() {
    if ($(this).val() == '') {
        $(this).val($(this).data('default_val'));
    }
});

var paper = Raphael(document.getElementById("notepad"), 400, 70);

function drawBottles(count) {
    for (i = 0; i < count; i++) {

        var randomNumber3 = Math.floor(Math.random() * 25);
        var path_a = paper.path("M242.07,270.119c0,0-14.596-30.606-7.625-35.793 c3.864-2.876,2.145-18.561,1.832-18.784c-0.313-0.224-1.839-0.319-1.839-0.319c-1.555-0.192-0.201-3.456-0.201-3.456 s0,0-0.598-0.352c-0.598-0.351,1.129-1.345,1.129-1.345c3.738-2.785,10.449-2.983,11.126-2.344c0.677,0.64-0.354,1.44-0.354,1.44 s0.73,0.832,1.333,2.111c0.604,1.28-0.792,1.665-0.792,1.665c1.852,6.718,9.877,14.935,9.877,14.935 c4.795,0.589,7.7,10.683,7.7,10.683l6.271,22.746C269.929,261.307,263.641,270.119,242.07,270.119z");
        path_a.attr({
            fill: 'none',
            stroke: '#231F20',
            "stroke-width": '3',
            "stroke-miterlimit": '10',
            'stroke-opacity': '1'
        }).data('id', 'path_a');
        path_a.translate((i * 30) - 225, -200);
        path_a.rotate(randomNumber3);

    } //end of for statement
}

$("#total1").keyup(function() {
    var val = $(this).val();
    if (val.length === 0) {
        paper.clear();
        $("#max").text('');
        return;
    }
    var value = parseInt(val);
    paper.clear();
    if (value > 300) {
        drawBottles(10);
        $("#max").text('you have reached the maximum');
    } else if (value > 270) {
        drawBottles(10);
    } else if (value > 240) {
        drawBottles(9);
    } else if (value > 210) {
        drawBottles(8);
    } else if (value > 180) {
        drawBottles(7);
    } else if (value > 150) {
        drawBottles(6);
    } else if (value > 120) {
        drawBottles(5);
    } else if (value > 90) {
        drawBottles(4);
    } else if (value > 60) {
        drawBottles(3);
    } else if (value > 30) {
        drawBottles(2);
    } else if (value != 0 && 0 != value.length) {
        drawBottles(1);
    }

});

Answer 1

Call keyup() on $('#total1') at the end of updateTotal:

var updateTotal = function() {
    var input1 = parseInt($('#the_input_id').val());
    var input2 = parseInt($('#the_input_id1').val());
    var input3 = parseInt($('#the_input_id2').val());
    if (isNaN(input1) || isNaN(input2) || isNaN(input3)) {
        $('#total').text('');
    } else {
        var max = 300;
        var total = input1 + (input2 * 2) + (input3 * 3);

        if (total > max) {
            $('#total').text('The maximum is ' + max);
            $('#total1').val(500);
        } else {

            $('#total1').val(total);
        }
    }

    $('#total1').keyup();  // This will trigger the keyup handler.
};

This will call the keyup handler for the field programatically.

Added to your jsfiddle here: http://jsfiddle.net/QX9C7/4/

Answer 2

I figured it out. Just needed to move the if statement inside of the updateTotal function and pass the total variable to it. http://jsfiddle.net/anderskitson/K5Lqd/

$('#the_input_id').keyup(function() {
    updateTotal();
});

$('#the_input_id1').keyup(function() {
    updateTotal();
});

$('#the_input_id2').keyup(function() {
    updateTotal();
});

var updateTotal = function() {
    var input1 = parseInt($('#the_input_id').val());
    var input2 = parseInt($('#the_input_id1').val());
    var input3 = parseInt($('#the_input_id2').val());
    if (isNaN(input1) || isNaN(input2) || isNaN(input3)) {
        $('#total').text('');
    } else {
        var max = 300;
        var total = input1 + (input2 * 2) + (input3 * 3);

        if (total > max) {
            $('#total').text('The maximum is ' + max);
            $('#total1').val(300);
        } else {

            $('#total1').val(total);
            var val = total;
    if (val.length === 0) {
        paper.clear();
        $("#max").text('');
        return;
    }
    var value = parseInt(val);
    paper.clear();
    if (value > 300) {
        drawBottles(10);
        $("#max").text('you have reached the maximum');
    } else if (value > 270) {
        drawBottles(10);
    } else if (value > 240) {
        drawBottles(9);
    } else if (value > 210) {
        drawBottles(8);
    } else if (value > 180) {
        drawBottles(7);
    } else if (value > 150) {
        drawBottles(6);
    } else if (value > 120) {
        drawBottles(5);
    } else if (value > 90) {
        drawBottles(4);
    } else if (value > 60) {
        drawBottles(3);
    } else if (value > 30) {
        drawBottles(2);
    } else if (value != 0 && 0 != value.length) {
        drawBottles(1);
    }
        }


    }
};
var default_val = '';
$('input[class^="class-"]').focus(function() {
    if ($(this).val() == $(this).data('default_val') || !$(this).data('default_val')) {
        $(this).data('default_val', $(this).val());
        $(this).val('');
    }
});

$('input[class^="class-"]').blur(function() {
    if ($(this).val() == '') {
        $(this).val($(this).data('default_val'));
    }
});

var paper = Raphael(document.getElementById("notepad"), 400, 70);

function drawBottles(count) {
    for (i = 0; i < count; i++) {

        var randomNumber3 = Math.floor(Math.random() * 25);
        var path_a = paper.path("M242.07,270.119c0,0-14.596-30.606-7.625-35.793 c3.864-2.876,2.145-18.561,1.832-18.784c-0.313-0.224-1.839-0.319-1.839-0.319c-1.555-0.192-0.201-3.456-0.201-3.456 s0,0-0.598-0.352c-0.598-0.351,1.129-1.345,1.129-1.345c3.738-2.785,10.449-2.983,11.126-2.344c0.677,0.64-0.354,1.44-0.354,1.44 s0.73,0.832,1.333,2.111c0.604,1.28-0.792,1.665-0.792,1.665c1.852,6.718,9.877,14.935,9.877,14.935 c4.795,0.589,7.7,10.683,7.7,10.683l6.271,22.746C269.929,261.307,263.641,270.119,242.07,270.119z");
        path_a.attr({
            fill: 'none',
            stroke: '#231F20',
            "stroke-width": '3',
            "stroke-miterlimit": '10',
            'stroke-opacity': '1'
        }).data('id', 'path_a');
        path_a.translate((i * 30) - 225, -200);
        path_a.rotate(randomNumber3);

    } //end of for statement
}

//$("#total1").keyup(function() {


//});