Добавление формы jquery не работает в моем HTML-файле - PullRequest
Новая
       1

Добавление формы jquery не работает в моем HTML-файле

0 голосов
/ 20 февраля 2012

У меня есть рабочий код Jquery в http://jsfiddle.net/anderskitson/Efbfv/5/ Однако на моем сайте в http://anderskitson.ca/tests/javascript/bottlesForm.html это не работает, я добавлю код ниже, но я не понимаю, почему это не будетработать

1006 * 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>

Ответы [ 3 ]

2 голосов
/ 20 февраля 2012

Используйте код ниже, он будет работать: 

<!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>
1 голос
/ 20 февраля 2012

Это просто, просто переместите 

<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 . . 


});
0 голосов
/ 20 февраля 2012 
<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>​
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...