Stack Exchange
jQuery code .val(); not working in FF
I have this code
function calculateTotal() {
    var total = 0;      
    $(".quantity").each(function() 
                                 {
                                     if (!isNaN(this.value) && this.value.length != 0) 
                                     {             
                                     total += parseFloat(this.value);         
                                     }     
                                     });      
    $("#total_quantity").val(total); 
}

 <input onchange="calculateTotal();"  name="sol1" type="text" class="result_form_textbox_small quantity" id="sol1" />

 <input name="total_quantity" type="text" class="result_form_textbox_small" id="total_quantity" />

This code is working in IE very good but it's not working in FF.
What is the proplem?
Thanks in advance.
EDIT :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<<script type="text/javascript" src="javascripts/jquery-1.4.2.js"></script>
<script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script>
<script type="text/javascript" src="javascripts/jquery.jscrollpane.min.js"></script>
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<link href="stylesheets/public.css" rel="stylesheet" type="text/css" />
 <script type="text/jscript">
function calculateTotal() {
    var total = 0;      
    $(".quantity").each(function() 
                                 {
                                     if (!isNaN(this.value) && this.value.length != 0) 
                                     {             
                                     total += parseFloat(this.value);         
                                     }     
                                     });      
    $("#total_quantity").val(total); 
} 
</script>
</head>


What happens in FF? What does the error console say?

A little more details is needed to give you more help here.

you really should not declare event handlers inline, especially since you are already using jQuery which makes it extremely easy to do it via javascript.

The 'error console,' check the page with Firebug to see if it logs any errors. Incidentally, what do the other major (-ish) browsers do with your page (Opera, Chrome, Safari)?

@SzamDev: I'm not seeing what the problem is here...

in Firebug, I get this error : calculateTotal is not defined

@SzamDev: Your function needs to be defined in the global namespace in order to use the inline handler. If you have it inside jQuery's DOM ready function, it won't be seen by the inline call.

@patrick dw: I am defining it in the global namespace, I just added a function inside script tag. I think this is inside global name space.

@SzamDev: Yes, that would seem to be global. Can you provide a more complete view of your code? If calculateTotal is not defined, then there must be some reason for it.

@SzamDev: I notice one difference between the scripts is that the one that has your function  has type="text/jscript" instead of type="text/javascript". Not sure if it makes a difference, but try changing it to match the others. Also, your first script tag has an extra < at the beginning. <<script type="text/javascript" ...

@patrick dw: I solve it, the proplem was in type="text/jscript and I edited it to type="text/javascript" and every thing is ok. Thank you very much

@patrick dw: I solve it, the proplem was in type="text/jscript and I edited it to type="text/javascript" and every thing is ok. Thank you very much

@patrick dw: I solve it, the proplem was in type="text/jscript and I edited it to type="text/javascript" and every thing is ok. Thank you very much

@SzamDev: I'm going to add that as an answer so you can close this one out.

The issue is that you have type="text/jscript" instead of type="text/javascript" for the script that contains your function.

use 
$(this).val()

instead of 
this.value


Why would you want to do that? It is perfectly valid, and more efficient to do this.value on a text input.

if they are having cross-browser issues, jQuery is generally good about bridging those gaps, and I'm not sure that efficiency is what they are worried about in summing some numbers with javascript.

There aren't any cross browser issues that you're fixing with your answer. EDIT: There are a couple input types that have cross browser this.value issues in some cases, although I don't think they involve FireFox.

@Flavio and what does that have to do with my answer?

@jondavidjohn Nothing, sorry. That comment was supposed to go on my answer. I haven't tested your solution.

the fact is that in the code given by the asker this.value does not work, and $(this).val() does.  if you want to argue efficiency that is fine, but the bottom line is it works.

He did not ask us to re-factor his code and make it a best practice example.  The place to suggest better practices is in the comments (as I did with declaring events in-line).

"this.value does not work, and $(this).val() does" Really? I don't see any indication that $(this).val() fixed the issue. All you did was re-factor the code to use a jQuery API wrapper. If you think $(this).val() is a better practice, then maybe you should have made it a comment.

coming back to this after stepping away from my machine after a few hours, I realize how stupid I made myself look, standing by an answer that turned out to be wrong, and being rude to someone who's rep I respect.  Hope you understand, and chalk it up to a SO noob that got a little too excited over rep points in his first few days.

Don't sweat it. I've been there. ;o)

Try this:
HTML
 <input  name="sol1" type="text" class="result_form_textbox_small quantity" id="sol1" />

 <input name="total_quantity" type="text" class="result_form_textbox_small" id="total_quantity" />

JS
 function calculateSum() {

        var sum = 0;
        //iterate through each textboxes and add the values
        $(".quantity").each(function() {
            //add only if the value is number
            if(!isNaN(this.value) && this.value.length!=0) {
                sum += parseFloat(this.value);
            }

        });
        //.toFixed() method will roundoff the final sum to 2 decimal places
        $("#total_quantity").val(sum.toFixed(2));
    }


$(document).ready(function() {

    $('.quantity').keyup(function() { 
            calculateSum();
    });
});


You can also use the following:

$(this).attr("value","");

