Javascript表单计算w / Radio Buttons&文本框

时间:2012-05-16 01:46:50

标签: javascript jquery html forms javascript-events

jQuery库未正确导入,单击按钮时表单未在BAC字段中显示答案。从这一点来看,答案应该相对简单。请检查BAC字段的显示代码。

    <html>
    <head>
    <meta charset="utf-8" />
    <title>bac2</title>
    </head>
    <body>
    <p></p>
        <form action="" id="bacForm">
        <input type="radio" name="gender" value="male" /> Male<br /><br>
        <input type="radio" name="gender" value="female" /> Female<br><br>
        Weight <input type="text" name="weight" id="weight"/><br><br>
        Hours  <input type="text" name="hours" id="hours" /><br><br>
        Drinks <input type="text" name="drinks" id="drinks"/><br><br>
        <INPUT TYPE="button" value="submit" name="submit"><br><br>
        BAC: <input type="text" name="bac" id="bac"/>

        </form>         

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>           
    <script type="text/javascript">
            $('#submit').click(function(){

        var gender = $('input[name=gender]:checked', '#bacForm').val();
        var weight = parseInt($('#weight').val()) || 0;
        var hours = parseInt($('#hours').val()) || 0;
        var drinks = parseInt($('#drinks').val()) || 0;
        var bac = 0;

        if (gender=="male"){
            bac = ((drinks * .06 * 100 * 1.055) / (weight * .68)) - (0.015 * hours);
        }else if(gender=="female"){
            bac = ((drinks * .06 * 100 * 1.055) / (weight * .55)) - (0.015 * hours);
        }
        $('#bac').val(bac);

    });


    </script>   






    </body>
    </html>

4 个答案:

答案 0 :(得分:1)

回答你的问题:是的,确实可以使用单选按钮和文本框中的值来执行计算。

针对您的具体情况,您需要提出更具体的问题。尝试在代码中加入一些断点,看看在执行时会发生什么......在发布问题时,请告诉我们它与您的期望有何不同之处。

答案 1 :(得分:1)

我确信你只是在学习JS,但是你已经以非常不必要,复杂和复杂的方式编写了所有代码。您可以如此简化该代码,请参阅以下示例(请注意我使用jQuery只是为了更容易获取值)

// get values
var bac = 0;
var gender = $('input[name="gender"]:checked').val();
var weight = $('#weight').val();
var hours = $('#hours').val();
var drinks = $('#drinks').val();

// calculate bac
if ( gender == 'male' ) {
    bac = ((drinks * .06 * 100 * 1.055) / (weight * .68)) - (0.015 * hours);
}
else {
    bac = ((drinks * .06 * 100 * 1.055) / (weight * .55)) - (0.015 * hours);
}

// round to 2 decimal places
bac = Math.round(bac * 100) / 100;

$('#bac').val(bac);

您可以在http://jsfiddle.net/dYhpC/

看到这个

答案 2 :(得分:1)

你说你正在寻找简单,所以我把一个快速的jQuery小提琴拼凑在一起,展示了一个更简单的方法。请在此处查看:http://jsfiddle.net/brianmat/rQLtE/

主要代码在

之下
$('#submit').click(function(){

    var gender = $('input[name=gender]:checked', '#bacForm').val();
    var weight = parseInt($('#weight').val()) || 0;
    var hours = parseInt($('#hours').val()) || 0;
    var drinks = parseInt($('#drinks').val()) || 0;
    var bac = 0;

    if (gender=="male"){
        bac = ((drinks * .06 * 100 * 1.055) / (weight * .68)) - (0.015 * hours);
    }else if(gender=="female"){
        bac = ((drinks * .06 * 100 * 1.055) / (weight * .55)) - (0.015 * hours);
    }
    $('#answer').val(bac);

});

答案 3 :(得分:0)

这是成品:http://bac.klinetel.com/;我必须说一个体面的大学工具。