'JavaScript Form Calculation with Radio Buttons & Textboxes

The jQuery library is not importing correctly and the form is not displaying the answer in the BAC field when clicking on the button. The answer should be relatively simple from this point. Please check the display code for the BAC field:

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


Solution 1:[1]

I'm sure you're just learning JS but you've written all that code in a very unnecessary, convoluted, and complicated manner. You can simplify that code so much, see the following example (note I'm using jQuery just to make it easier to get the values)

// 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);

You can see this live at http://jsfiddle.net/dYhpC/

Solution 2:[2]

To answer your question: yes, it is indeed possible to use the values from radio buttons and text boxes to perform calculations.

For your specific scenario, you'll need to ask a more specific question. Try putting some breakpoints in your code and see what happens as it executes... when posting a question, tell us where exactly it does something different from your expectations.

Solution 3:[3]

You said you are looking for simple, so I threw together a quick jQuery fiddle demonstrating a simpler approach to this. Check it out here: http://jsfiddle.net/brianmat/rQLtE/

The main code is below

$('#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);

});

Solution 4:[4]

Here's the finished product: http://bac.klinetel.com/ ; A decent college tool I must say.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Christian
Solution 2 Robert Levy
Solution 3 BrianM
Solution 4 Klinetel

Related Questions