0

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>
Improve this question

4 Answers 4

Reset to default
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/

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

You sir, are amazing. Thank you for suggesting jQuery. I should probably use that from now on.
Having trouble embedding it. Once embedded, the form resets itself when I click submit. Any suggestions? The Javascript console says the $function is undefined.
Are you including jQuery properly?
I think so, please look at the updated code above. I didn't use your rounding though.
You should put your scripts in the head tag, and don't forget the jQuery ready function: $(function() { })
|
1

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.

Improve this answer

5 Comments

Ok. The code is to calculate a blood alcohol content from male or female values and textboxes that enter in numerical values. Those in turn, output a blood alcohol content percentage.
@noahtk - yes, i gathered that :) you need to put in a little effort here though... run your code in the debugger and tell us what its doing that differs from your expectations
I thought so, but the problem is that it won't even run.
ok... so what error message do you get? open up the javascript console for whatever browser you are using a look at the error messages
The $(function() is undefined in the Javascript console. Not sure how to fix that. I think my problem might be the embedding.
1

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

});
Improve this answer

10 Comments

I tried embedding that in the html from the jsFiddle and it doesn't do anything when clicking submit. The $(function() is undefined in the Javascript console.
Did you include a reference to the jQuery libraries? You can find some examples and a quick overview here docs.jquery.com/How_jQuery_Works
No, I am not successfully able to do that. I tried this above the code: <script type="text/javascript" src="jquery.js"> </script> <script type="text/javascript">
Change from a submit button to a regular button <INPUT TYPE="button" name="submit" id="submit" value="submit">
$('#answer').val(bac); becomes $('#bac').val(bac); - This is a jQuery selector which allows you to select a control (or controls). The $('#bac') finds controls named 'bac'. Make sure you review the names of your controls compared to the fiddle because they might have changed to make things a little clearer and more consistent.
|
0

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.