1,105,427 Community Members

Calculate value from inputs boxes

arcana55
Newbie Poster
2 posts since Jan 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
Unverified Member
 
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;
           });

  });
Member Avatar
Taywin
Posting Maven
2,632 posts since Apr 2010
Reputation Points: 134 [?]
Q&As Helped to Solve: 378 [?]
Skill Endorsements: 17 [?]
 
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.

arcana55
Newbie Poster
2 posts since Jan 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
Unverified Member
 
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().

Member Avatar
Taywin
Posting Maven
2,632 posts since Apr 2010
Reputation Points: 134 [?]
Q&As Helped to Solve: 378 [?]
Skill Endorsements: 17 [?]
 
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.

Member Avatar
Bachov Varghese
Posting Whiz in Training
205 posts since Sep 2011
Reputation Points: 45 [?]
Q&As Helped to Solve: 52 [?]
Skill Endorsements: 6 [?]
 
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 three months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: