Auto calculation of div values on blur

Question

I am generating a table of divs from mysql database with code as below :

<?php
    $sql = "SELECT * FROM menuitem";
    $result = mysql_query($sql); $i =1;
    while ($row = mysql_fetch_array($result)) {?>

        <div class="orderblock">
            <div class="orderlist">
                <div class="pimage">
                    <p></p>
                </div>
                <div class="pdesc">
                    <p><?php echo $row['prodname']; ?></p>
                    <p><?php echo substr($row['proddesc'], 0, 20); ?></p>
                </div>
                <div class="portion">
                    <input type="text" onblur="document.getElementById('tot<?php echo $i;?>').value=document.getElementById('por<?php echo $i;?>').value * document.getElementById('pri<?php echo $i;?>').value;" id="por<?php echo $i;?>" name="<?php echo $row['prodname']; ?>" >
                </div>
                <div class="price">
                    <p id="pri<?php echo $i;?>"><?php echo $row['price']; ?></p>
                </div>
                <div class="total">
                    <p><input style="border: none;" type="text" id="tot<?php echo $i;?>" disabled="disabled" value=""> </p>
                </div>
            </div>
        </div>

    <?php $i++; }
?>

this is my final code, finally I got it working but I am getting NaN as result could any please sort it for me. thanks

Answer 1

Try this now. Before try this remove your blur event from html.I hope this will help you.

$(document).ready(function () {
    $("input[type=text]").blur(function () {

        var portion = $(this).val();
        var price =  $(this).parent().parent().find(".price p").text();
        if(isNaN(portion)==false)
        {
            var tot = portion * price;
            $(this).parent().parent().find(".total p input").val(tot);
        }   
        else
        {
            $(this).parent().parent().find(".total p input").val(0);

        }
    });
});

Demo here