javascript calculation field comparison algorithm

Question

Good day,

I have 3 text fields for input.

TotalWeight
CustomUnitWeight
CustomsNumberOfUnit

There should be a validation to make sure TotalCustomWeight matches TotalWeight (neither higher nor lower).

I started playing around trying to construct a function for validating this no luck and looking for assistance

Scenario :

User input total weight of pkg at 30, then put number of custom unit at 2 and the weight at 10. On click the function calculate 2 * 10 = 20 and look at the total weight 30 and compare the total custom weight. In this case 20 does not equal to 30 therfore throw error message.

HTML

<input type="text" name="TotalWeight" id="TotalWeight" />
<input type="text" name="customsNumberOfUnitsUSA" id="CustomsNumberOfUnits" />
<input type="text" name="CustomsUnitWeight" id="CustomsUnitWeight" onChange="ChkWeight();" />

JAVASCRIPT

$(function(ChkWeight){
    $('#CustomsUnitWeight').click(function() {
        var TotalWeight = document.getElementById('TotalWeight'); 
        var CustomUnitWeight = document.getElementById('CustomsUnitWeight'); 
        var CustomsNumberOfUnit = document.getElementById('CustomsNumberOfUnits');

        var TotalCustomWeight = CustomUnitWeight * CustomsNumberOfUnit;

        if (TotalWeight != TotalCustomWeight) {
            error message "pkg weight does not match total custom weight"
        }
    }); 
});

looking for assistance in how to make the validation work by clculating and comparing 2 values, if no match throw error — user2859027, Dec 15 '13 at 15:46
One obvious problem with your code is that you're getting two input elements and trying to multiply them together, instead of getting the value of said inputs. Try document.getElementById('TotalWeight').value; and so on. — Josiah, Dec 15 '13 at 16:23

Airy · Accepted Answer · 2013-12-15T18:07:01.173

0

Well everything else is fine in your code just needs to put .value to get value from your input fields and converting string (simple text) to Float type and then calculate and show alert like

 <body>
    <input type="text" name="TotalWeight" id="TotalWeight" />
    <input type="text" name="customsNumberOfUnits" id="CustomsNumberOfUnits"/>
    <input type="text" name="CustomsUnitWeight" id="CustomsUnitWeight"  onblur="CheckWeight()" />
    //I have changed the event as onblur and calling CheckWeight() function defined in javascript below.
 </body>


 <script type="text/javascrit">
  function CheckWeight()
  {
      var TotalWeight = document.getElementById('TotalWeight').value; 
      var CustomUnitWeight = document.getElementById('CustomsUnitWeight').value; 
      var CustomsNumberOfUnit = document.getElementById('CustomsNumberOfUnits').value;

      //parsing text value to Float type for multipication
      var TotalCustomWeight = parseFloat(CustomUnitWeight) * parseFloat(CustomsNumberOfUnit);

      if (TotalWeight != TotalCustomWeight)
      {
           alert("pkg weight does not match total custom weight");
      }
   }
 </script

and Off course you must need to validate for value to be number before calculation. This works perfect.

edited Dec 15 '13 at 18:07

answered Dec 15 '13 at 16:23

Airy

5,484
7
53
78

Im trying to figured it out using fiddle..no luck – user2859027 Dec 15 '13 at 16:42
what problem you are facing? May i see your fiddle? – Airy Dec 15 '13 at 16:44
do you have a live demo? im still struggling sorry – user2859027 Dec 15 '13 at 18:14
Your updated fiddle is not not found 404 error and what error you are getting? – Airy Dec 15 '13 at 18:27
Well I don't know why JSfiddle is not working but it works like charm when i run it my computer – Airy Dec 15 '13 at 19:09
You are absolutely right, I stopped working in fiddle to construct javascript function and transferred into my project and it worked..lesson learned fiddle not a good workbench it seem? Thank You answer approved – user2859027 Dec 15 '13 at 19:34

javascript calculation field comparison algorithm

1 Answers1