CODEWITHSUNDEEP
jqueryhtmlforms
Cool Guy Yo
Cool Guy Yo

Reputation: 6110

jquery form addition not working in my html file

I have a working Jquery code in http://jsfiddle.net/anderskitson/Efbfv/5/ However on my site at http://anderskitson.ca/tests/javascript/bottlesForm.html it doesn't work I'll include the code below but I don't understand why it wouldn't be working.

CODE

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Rat Recipes</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <script>
    $('#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)) {
            $('#total').text('');
        } else {
            var max = 500;
            var total = input1 + (input2 * 2) + (input3 * 3);

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


        }
    };​
    </script>
    </head>
    <body>
        <form method="post">
        small bottles
        <input type="text" id="the_input_id">
        medium bottles
        <input type="text" id="the_input_id1">
        Large bottles
        <input type="text" id="the_input_id2">
        <input type="text" id="total1">
    </form>



    <div id="total">
    total:
    </div>​
    </body>
</html>

Upvotes: 0

Views: 707

Answers (3)

Vince Pergolizzi
Vince Pergolizzi

Reputation: 6584

<body>
    <form method="post">
    small bottles
    <input type="text" id="the_input_id">
    medium bottles
    <input type="text" id="the_input_id1">
    Large bottles
    <input type="text" id="the_input_id2">
    <input type="text" id="total1">
</form>



<div id="total">
total:
</div>
    <script>
$(document).ready(function() {

$('#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) || input1 === undefined) || (isNaN(input2) || input2 === undefined) || (isNaN(input3) || input3 === undefined)){
        $('#total').text('');
    } else {
        var max = 500;
        var total = input1 + (input2 * 2) + (input3 * 3);

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


    }
};
});
</script>
</body>
</html>​

Upvotes: 0

user1219892
user1219892

Reputation:

Use the code below it'll work:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Rat Recipes</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

    </head>
    <body>
        <form method="post">
        small bottles
        <input type="text" id="the_input_id">
        medium bottles
        <input type="text" id="the_input_id1">
        Large bottles
        <input type="text" id="the_input_id2">
        <input type="text" id="total1">
    </form>



    <div id="total">
    total:
    </div>
    <script>
    $('#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)) {
            $('#total').text('');
        } else {
            var max = 500;
            var total = input1 + (input2 * 2) + (input3 * 3);

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


        }
    };
    </script>
    </body>
</html>

Upvotes: 2

user1219892
user1219892

Reputation:

It's a simple one, just move the 

<script>
 /// with your code here to the end of the document as you're assigning events to elements before they're created or add 
</script>



$(document).ready(function(){


/// your code here . . 


});

Upvotes: 1

Related Questions