Find your content:

Search form

You are here

Javascript for multiplying fields not working


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));



     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: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 headerValue="Unit Price($)">
                     <apex:outputlabel Value="{!item.Price__c}" styleClass="price{!rowNum}" onblur="multiplycal();"/>
           <input type="hidden" value="{!rowNum}" class="values" name="values"/>  
 <apex:pageBlockSectionItem >          
                     <apex:outputLabel value="total($) :"/>
                     <apex:outputLabel value="" styleClass="sum"  style="width:78px;text-align:right;display:block;font-size:12px;color:#000000;" />

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

Attribution to: Eagerin Sf

Possible Suggestion/Solution #1

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.

Attribution to: Mike Chale

Possible Suggestion/Solution #2

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:

j$ = jQuery.noConflict();

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

Attribution to: Caspar Harmer

Possible Suggestion/Solution #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() {

Attribution to: Phil Rymek
This content is remixed from stackoverflow or stackexchange. Please visit

My Block Status

My Block Content