math function with jQuery

Question

Trying to using jQuery do some basic math functions.

Step 1. User enter Gross weight, and Tare weight, my function auto generate Net weight, which is Gross weight minus Tare weight.(This step works)

Step 2. User enter Price per pound, my function use Price per pound times Net weight to calculate total cost.

So far my code looks like this, it returns the net weight but does not return the total cost:

<script>
$(document).ready(function() {
       $(".sub").focusout(function() {
         $("#net").html('');
         var gross = $("#gross").val();
         var tare = $("#tare").val();
         var net = gross-tare;
         $("#net").html(Math.round(net*1000)/1000);
        });
    });

$(document).ready(function() {
       $(".sub1").focusout(function() {
         $("#total").html('');
         var net = $("#net").val();
         var ppp = $("#ppp").val();
         var total = net*ppp;
         $("#total").html(Math.round(total*1000)/1000);
        });
    }); 

  </script>

And the HTML:

   <input type='number' name='gross' id=gross class=sub>
   <input type='number' name='tare' id=tare class=sub>
   <p id=net name='net'></p>
   <input type="number" id=ppp name="ppp" class=sub1/>
   <p id=total name='total'></p>

Forgive me if I am making stupid mistakes as I barely know jQuery, this is just one requirement for my project that I am working on.

depperm · Accepted Answer · 2015-08-18 15:36:08Z

1

A few minor things:

-id=gross should have quotes id='gross'

-$("#net").val(); net doesn't have a value, its a p, so use text()

-you'll want to use parseInt or parseFloat

Example:

$(document).ready(function () {
    $(".sub").focusout(function () {
        $("#net").html('');
        var gross = $("#gross").val();
        var tare = $("#tare").val();
        var net = gross - tare;
        $("#net").html(Math.round(net * 1000) / 1000);
    });

    $(".sub1").focusout(function () {
        $("#total").html('');
        var net = parseInt($("#net").text());
        var ppp = parseInt($("#ppp").val());
        var total = net * ppp;
        $("#total").html(Math.round(total * 1000) / 1000);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type='number' name='gross' id='gross' class='sub'/>
<input type='number' name='tare' id='tare' class='sub'/>
<p id='net' name='net' class='sub1'></p>
<input type="text" id='ppp' name="ppp" class='sub1'/>
<p id='total' name='total'></p>

answered Aug 18, 2015 at 15:36

depperm

10.8k4 gold badges46 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

zzzzBov Over a year ago

"you'll want to use parseInt or parseFloat" in most instances I recommend using the unary + operator to cast to a Number instead of parseFloat. It's more concise too: +$('#gross').val().

bytestorm · Accepted Answer · 2015-08-18 15:48:54Z

Put the class names/ ids or other attributes in quotes. They are parsed wrongly by the browser. Check using "firebug" or "inspect element".

Problem in your code: You are using '$("#net").val()', but $.val() works only on input fields but #net is a <p> tag, so get its text using $.html().

Your code should be like this

HTML:

<input type='number' name='gross' id=gross class="sub">
<input type='number' name='tare' id=tare class="sub">
<p id="net" name='net'></p>
<input type="number" id="ppp" name="ppp" class="sub1"/>
<p id="total" name='total'></p>

SCRIPT:

$(document).ready(function() {
   $(".sub").focusout(function() {
      $("#net").html('');
      var gross = $("#gross").val();
      var tare = $("#tare").val();
      var net = gross-tare;
      $("#net").html(Math.round(net*1000)/1000);
   });
});

$(document).ready(function() {
   $(".sub1").focusout(function() {
     $("#total").html('');
     var net = parseFloat($("#net").html());
     var ppp = parseFloat($("#ppp").val());
     var total = net*ppp;
     $("#total").html(parseFloat(total));
   });
});

Collectives™ on Stack Overflow

math function with jQuery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related