I stuck to this problem. I want to calculate body BMI.

My HTML - every row <tr> is created dynamically by PHP.

     <tbody>        
     <tr id="person_bmi">
        <td>Jack</td>
        <td><input name="weight" type="text" class="span1" id="weight" maxlength="5"></td>
        <td><input name="height" type="text" class="span1" id="height" maxlength="5"></td>
        <td><input name="bmi" type="text" class="span1" id="bmi" readonly></td>       
      </tr>

    <tr id="person_bmi">
        <td>Michael</td>
        <td><input name="weight" type="text" class="span1" id="weight" maxlength="5"></td>
        <td><input name="height" type="text" class="span1" id="height" maxlength="5"></td>
        <td><input name="bmi" type="text" class="span1" id="bmi" readonly></td>       
      </tr>

      //and so on...
</tbody>

What I try to achieve is every person Jack, Michael, so on.. will have their own BMI values in #bmi textfield after calculated their own $weight/($height*100/$height*100) value. I try to create my own code but its not make sense..

$("#weight, #height").keyup(function(){
    var $weight= $("#weight").val();
    var $height= $("#height").val();
    var $bmi = $weight/($height/100*$height/100);

    $("#bmi").val(parseInt($bmi));
});

Can someone show me the way? Thanks

I stuck to this problem. I want to calculate body BMI.

My HTML - every row <tr> is created dynamically by PHP.

     <tbody>        
     <tr id="person_bmi">
        <td>Jack</td>
        <td><input name="weight" type="text" class="span1" id="weight" maxlength="5"></td>
        <td><input name="height" type="text" class="span1" id="height" maxlength="5"></td>
        <td><input name="bmi" type="text" class="span1" id="bmi" readonly></td>       
      </tr>

    <tr id="person_bmi">
        <td>Michael</td>
        <td><input name="weight" type="text" class="span1" id="weight" maxlength="5"></td>
        <td><input name="height" type="text" class="span1" id="height" maxlength="5"></td>
        <td><input name="bmi" type="text" class="span1" id="bmi" readonly></td>       
      </tr>

      //and so on...
</tbody>

What I try to achieve is every person Jack, Michael, so on.. will have their own BMI values in #bmi textfield after calculated their own $weight/($height*100/$height*100) value. I try to create my own code but its not make sense..

$("#weight, #height").keyup(function(){
    var $weight= $("#weight").val();
    var $height= $("#height").val();
    var $bmi = $weight/($height/100*$height/100);

    $("#bmi").val(parseInt($bmi));
});

Can someone show me the way? Thanks

• javascript
• jquery

• Why do you prefix your non-jQuery variables with $?! Besides that, IDs have to be unique. – ThiefMaster Commented May 27, 2012 at 16:56
• influenced by PHP I presume.. so I can quickly identified JS variables.. hope its not bad practiced.. – Mikey Commented May 27, 2012 at 17:10
• Well, it is. Especially in jQuery-based code people expect a variable prefixed with $ to contain a jQuery object (and even this is a questionable code style - but mon enough to not plain about it). – ThiefMaster Commented May 27, 2012 at 17:11

5 Answers 5

Remove the duplicate IDs and use class="weight", class="height" and class="bmi" instead. Then you can use the following jQuery code:

$(".weight, .height").keyup(function() {
    var row = $(this).closest('tr');
    var weight = parseInt(row.find('.weight').val(), 10);
    var height = parseInt(row.find('.height').val(), 10);
    var bmi = weight / (height / 100 * height / 100);
    row.find('.bmi').val(isNaN(bmi) ? '' : bmi);
});

If you want to allow floats for the input values, replace the two lines containing parseInt with these:

var weight = parseFloat(row.find('.weight').val());
var height = parseFloat(row.find('.height').val());

Demo: http://jsfiddle/KStjd/

The problem is most likely that val returns strings and strings can't me multiplied or divided. As mentioned by ThiefMaster you also can't have multiple items with the same id so change <tr id="person_bmi"> to <tr class="person_bmi">

$(".person_bmi input").keyup(function() {
   var $parent = $(this).parent().parent();

   var weight = parseFloat($parent.find("[name='weight']").val());
   var height = parseFloat($parent.find("[name='height']").val());
   var bmi = weight/(height/100*height/100);

   $parent.find("[name='bmi']").val(bmi);
});​

Here is a fiddle of a full working example: http://jsfiddle/uCAYF/1/

The .find function you see being used is "scoped" in the sense that it will only find nodes that are descended from the element it was called on. Since it is scoped it will safely select the the input field of interest on the given row.

jQuery lets you use CSS selectors when searching for elements so you can do more than just look things up by id. For instance, in the example above I find your input elements by their name.

Here are some good resources on the different selectors you can use and how they work: http://www.w3/TR/CSS2/selector.html

http://www.w3/TR/selectors/

Please try to add unique id's:

var weight= parseFloat($("#person1_weight").val());
var height= parseFloat($("#person1_height").val());
var bmi = weight/(height/100*height/100);

$("#person1_bmi").val(bmi); // bmi is not an integer

Or the following will probably work regardless of the invalid non unique id's so you could leave them (not remended) or take all of the id's off. It uses the input positions.

$("tr input:eq(0), tr input:eq(1)").keyup(function(){
    var weight= parseFloat($(this).closest('tr').find('input:eq(0)'));
    var height= parseFloat($(this).closest('tr').find('input:eq(1)'));
    var bmi = weight/(height/100*$height/100);

    $(this).closest('tr').find('input:eq(2)').val(bmi);
});

$("input[name=weight], input[name=height").keyup(function() {
    var row = $(this).parent().parent(),
        weight = parseFloat($('input[name=weight]', row).val()),
        height = parseFloat($('input[name=height]', row).val());
    var bmi = weight / (height / 100 * height / 100);
    $('.bmi', row).val(isNaN(bmi) ? '' : bmi);
});

Working Sample

$(document).ready(function()
{
    $("PutYourButtonID_Here").click(function(event){
        var weight= parseFloat($("#person1_weight").val());
        var height= parseFloat($("#person1_height").val());
        var bmi = weight/(height/100*height/100);
        $("#person1_bmi").val(bmi);
    });
});