CODEWITHSUNDEEP
javascriptjqueryhtml
Xchai
Xchai

Reputation: 1928

How to use jQuery to store number inputs to variables and performing calculation to update number input again?

I am making a BMI calculator using HTML and jQuery. 

<form id="bmicalc">
    <fieldset>
        <legend>BMI Calculator:</legend>
        <p>
            <label>Height:
                <input type="number" id="height1" min="3" max="7">ft
                <input type="number" id="height2" min="0" max="11">in</label>
        </p>
        <p>
            <label>Weight:
                <input type="number" id="weight" min="1" max="1400">lb</label>
        </p>
        <p>
            <label>BMI:
                <input id="bmi" type="number" min="1" max="200">
            </label>
        </p>
        <p>
            <input type="button" id="tehbaton" value="Check your BMI">
        </p>
    </fieldset>
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10/jquery.min.js">
var height = $("#height1").val()*12 + $("#height2").val(); //Height in Inches
var weight = $("#weight").val();
$("#tehbaton").click(function(){
    $("#bmi").val(703*weight/(height^2));
});
</script>

Here is the fiddle: http://jsfiddle.net/uzD9C/

I originally wanted the calculation to be performed on keyup but decided I didn't know enough to do that. So I'm keeping it simple for now to just update the third input field upon clicking the submit button.

But as it is now, clicking the button doesn't do anything.

The equation for calculating BMI is: BMI = ( Weight in Pounds / ( Height in inches x Height in inches ) ) x 703

Upvotes: 0

Views: 2361

Answers (1)

Ringo
Ringo

Reputation: 3965

Try this:

$("#tehbaton").click(function () {
    if($("#height1").val() && $("#height2").val() && $("#weight").val()){
        var height = Number($("height1").val()) * 12 + Number($("height2").val());
        var weight = $("#weight").val();
        $("#bmi").val((703 * weight) / Math.pow(height,2));
    }
});

Here is Fiddle

Upvotes: 3

Related Questions