1.11M Members

Calculate value from inputs boxes

 
0
 

Hi!

I have the following table:

<table>
<tr>
    <th>Cost</th>
    <th>Quantity</th>
    <th>Sum</th>
</tr>

<tr class="txtMult">
<td class="val1">1</td>
<td><input class="val2" type="text" name="txt/>"</td>
<td><span class="sum">0</span>
</tr>



<tr class="txtMult">
<td class="val1">2</td>
<td><input class="val2" type="text" name="txt/>"</td>
<td><span class="sum">0</span>

</tr>
</table>

What i want to do is to multiple row by row cells: val1*val2. I found the solution, which is working only if value in class val1 is an input value :(. I tried to change value in class val1 to float but it didnt work - as total it displays NaN. Thx for help.

  $(document).ready(function(){
       $(".txtMult input").keyup(multInputs);

       function multInputs() {
           var mult = 0;

           $("tr.txtMult").each(function () {

               var $val1=parseFloat($('.val1', this).val());

               var $val2=parseFloat($('.val2', this).val());

               var $total = ($val1 * 1) * ($val2 * 1)
               $('.sum',this).text($total);
               mult += $total;
           });

  });
 
0
 

which is working only if value in class val1 is an input value

What do you mean by that? If you are talking about if the input value is a number, then you could check whether the value is a number before you attempt to multiply. I don't know what functionality in JQuery which is the same as isNaN() in javascript function. I don't want to suggestion you to use the function directly in JQuery because it could confuse you later on. I would rather look for a similar function which is in JQuery format.

 
0
 

I mean that if i change this: <td class="val1">1</td> to this: <td><input class="val1" type="text" name="txt" value="1"/></td> it works fine. But thx i will check this isNan().

 
0
 

Oh OK. Nope, it is not the correct format then. The reason is that you change from element of table cell to be a nested input tag inside the table cell. In other words, you add a new element (child node) to the table cell instead of changing the tag. The JQuery is looking at an element named 'val2' but could not find it because the input tag is not a direct child to your table txtMult. Then you attempt to call val() from the unidentified object, so it returns NaN because it is not a number but an object.

Sorry that I can't give you the script because I don't use JQuery. I can only give you what to look for. What you need to look for in JQuery is to access its children node of input tag.

PS: Your original script has misplaced closing double quotations by the way.

 
0
 

Try this

<!DOCTYPE HTML>
        <html>
        <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

        </head>
        <body>
        <table>
        <tr>
            <th>Cost</th>
            <th>Quantity</th>
            <th>Sub-Total</th>
        </tr>
        <tr class="txtMult">
        <td class="val1">1</td>
        <td><input class="val2" type="text" name="txt"/></td>
        <td><span class="sum">0</span></td>
        </tr>
        <tr class="txtMult">
        <td class="val1">2</td>
        <td><input class="val2" type="text" name="txt"/></td>
        <td><span class="sum">0</span></td>
        </tr>
        <tr>
        <td align="right" colspan="2"><strong>Total</strong></td>
        <td class="total">0</td>
        </tr>
        </table>


        <script type="text/javascript">
        $(function(){

            function getTotal() {
                var total=0;
                $(".sum").each(function() {
                    total = total + parseFloat($(this).html());
                });
                return  parseFloat(total);
            }

            $('.val2').live('keyup', function() {
                var cost = parseFloat($(this).closest('tr').find('.val1').html());
                var quantity = parseFloat($(this).closest('tr').find('.val2').val());
                if(quantity)    var quantity = quantity;
                else quantity =0;
                var sum = parseFloat(cost * quantity);
                $(this).closest('tr').find('.sum').html(sum);
                $('.total').html(getTotal);
            });

        });
        </script>

        </body>
        </html>
You
This article has been dead for over six months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: