CODEWITHSUNDEEP
javascriptjqueryhtml
nancy
nancy

Reputation: 49

getting not a number(NaN) error html/js

I am getting NaN error while clicking radio button first. The page have a3 radio button when I click that 1st button it saya NaN and remaining 2 buttons has no response

this is my HTML

<input type="hidden" name="totalamount" id="totalamount" value="<?php echo get_total_amount();?>" /

<input type="radio" name="rmr"  id="payment1" value="3" onclick="updatepayment(this.value)" />
<input type="radio" name="rmr"  id="payment2" value="5.5" onclick="updatepayment(this.value)" />
<input type="radio" name="rmr"  id="payment4" value="10" onclick="updatepayment(this.value)" />
<div id="finalamount">
</div>

also I have mentioned my JS

$(document).ready(function(){  
    $('input[name=rmr]').click(function () {  
        //make sure one is checked    
        if($('input[name=rmr]:checked').length > 0) {    
            $('#finalamount').html($("#totalamount").val() * $("input[name=rmr]:checked").val());    
        } 
    }); 
});

Upvotes: 0

Views: 6626

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388316

It is working fine for me. Please find the working code in jsfiddle. You have to make sure that the value in the totalamount input is a numeric value. You can user parseFloat() to convert the string value into a float value. Ex

 parseFloat($("#totalamount").val()) * $("input[name=rmr]:checked").val()

As @Crowder parseFloat() is not necessary since javascript take care of the type conversions.

You try to put an alert()/console.log() command before the calculation to see whether the totalAmount is having an non-numeric value. Ex: alert($("#totalamount").val())

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074168

Three things:

1) As you're using the amount from the "totalamount" element, one has to ask: Are you sure that 

value="<?php echo get_total_amount();?>"

...is outputting a valid number? Because if not, then the code

$('#finalamount').html($("#totalamount").val() * $("input[name=rmr]:checked").val());

...will indeed result in NaN. The * operator will try to convert both of its operands from strings to numbers, and of course if the value output by that PHP code isn't a valid number (for instance, if it's "$0.00" or something), the result of the conversion will be NaN. And NaN times anything is NaN.

This example of an invalid amount in the "totalamount" element yields something that looks a lot like the behavior you describe. (That code isn't identical to yours, I did some very light refactoring, see below. But for the purposes of demoing an invalid number, it doesn't matter.)

2) There's no > at the end of that hidden input in the text of your question. If you did a direct copy-and-paste, I wonder if that could be the problem?

3) As you're using jQuery, there's no need for the onclick attributes. Instead:

$(document).ready(function(){  
   $("input[name=rmr]").click(function(){
        var checked = $("input[name=rmr]:checked");
        updatePayment(this.value);
        if (checked.length > 0) { // make sure one is checked
        {    
            $("#finalamount").html( $("#totalamount").val() * checked.val() );    
        } 
    }); 
});

...assuming you want updatePayment called every time.

Live example

Folding updatePayment into the main click behavior lets you avoid any issues that may exist with the order in which DOM0 (onclick attribute) handlers and DOM2 handlers (the ones used with jQuery) are called.

Upvotes: 3

Related Questions