Javascript for multiplying fields not working

Question

my javascript is

function multiplycal(){
          var values=$(".values").val();  
          var total = 0.0;

         for(var i=0;i<values;i++)
         {
            var amtfield=trim($(".price"+i).val());       
            var quantity=trim($(".quantity"+i).val());
            total= parseFloat(total)+(parseFloat(amtfield) * parseInt(quantity));

         }

         alert(total);
            $('.sum').html(formatDoll(total));
        }

     function formatDoll(number) {
        var pip = number.toFixed(2).split(".");
        return pip[0].split("").reverse().reduce(function(acc, number, i, orig) {
            return  number+ (i && !(i % 3) ? "," : "") + acc;
        }, "") + "." + pip[1];
    }

and my Vf Page is

<apex:outputpanel>
 <apex:variable value="0" var="rowNum"/> 
      <apex:dataTable value="{!templook}" var="item" style="margin-left:60px;"  cellpadding="5" cellspacing="6"   >
 <apex:column headerValue="Quantity">
                      <apex:outputlabel Value="{!item.Quantity__c}" onblur="multiplycal();" styleclass="quantity{!rowNum}"/>
                  </apex:column>
                   <apex:column headerValue="Unit Price($)">
                     <apex:outputlabel Value="{!item.Price__c}" styleClass="price{!rowNum}" onblur="multiplycal();"/>
                  </apex:column>
  </apex:datatable>
           <input type="hidden" value="{!rowNum}" class="values" name="values"/>  
</apex:outputpanel>
 <apex:pageBlockSectionItem >          
                     <apex:outputLabel value="total($) :"/>
                     <apex:outputLabel value="" styleClass="sum"  style="width:78px;text-align:right;display:block;font-size:12px;color:#000000;" />
                     </apex:pageBlockSectionItem>          

now need to multiple price*quantity. Where I'm wrong?????? Any Suggestions are also welcomed

Answer 1

Try adding a "no conflict" call to jQuery - this is pretty much mandatory for jQuery to work on a VisualForce page, as the '$' symbol is used by both the SalesForce and jQuery codebase. Put this at the bottom of your page:

<script>
j$ = jQuery.noConflict();
</script>

Then to call jQuery functions, use j$ rather than $.

Answer 2

Your JavaScript doesn't match your class names. You're looking for fields with classes of "price" and "quantity" but your Visualforce page is outputting price1, quantity1, price2, quantity2, etc . . .

Try removing the {!rowNum} merge fields.

Answer 3

I believe your primary problem is that multiplycal() is called on blur of your apex:outputLabels.

That is a strange way to expect users to use your vf page. According to your code a user needs to put focus on the text produced by the outputLabel and then remove that focus for multiplycal() to be called. The multiplycal() function should probably be called on on dom ready e.g.

$(document).ready(function() {
  multiplycal();
});