带有单选按钮和文本框的Javascript表单

jQuery库导入不正确，并且单击该按钮时，表单在BAC字段中未显示答案。从这一点来看，答案应该相对简单。请检查BAC字段的显示代码。带有单选按钮和文本框的Javascript表单

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

来源

2012-05-16 Klinetel

我确定你只是在学习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/

来源

2012-05-16 02:05:35

您好，先生感谢您提供jQuery，我应该从现在开始使用它 – Klinetel

无法嵌入它嵌入后，当我单击提交时，表单会自动重置任何建议Javascript控制台说$函数是未定义的。 – Klinetel

你是否正确地包含了jQuery？ –

要回答你的问题：是的，它确实有可能使用单选按钮和文本框中的值来执行计算。

对于您的特定情况，您需要提出更具体的问题。试着在你的代码中加入一些断点，看看它执行时会发生什么......当发布一个问题时，告诉我们它在哪里做了一些与你的期望不同的事情。

来源

2012-05-16 02:01:28

好的。代码是计算从男性或女性的价值和输入数值的文本框中的血液酒精含量。反过来，输出血液酒精含量百分比。 – Klinetel

@noahtk - 是的，我收集了这些:)你需要在这里付出一点努力，尽管...在调试器中运行你的代码，并告诉我们它的做法与你的期望有什么不同 –

我认为是这样，但问题是它甚至不会运行。 – Klinetel

你说你正在寻找简单的，所以我扔了一个快速的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); 

});

来源

2012-05-16 02:23:17 BrianM

我试图从jsFiddle中嵌入HTML，并且在点击提交时不做任何事情。 $（function（）在Javascript控制台中未定义。 – Klinetel

任何想法如何嵌入并使其正确工作？ – Klinetel

您是否包含对jQuery库的引用？您可以在这里找到一些示例和快速概述。 docs.jquery.com/How_jQuery_Works – BrianM

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

来源

2012-06-27 03:26:37 Klinetel

带有单选按钮和文本框的Javascript表单

回答

相关问题