帶有單選按鈕和文本框的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表單

回答

相關問題