jquery alert returns NaN

Question

I am new here, and new with JQuery, and i get stuck

HTML:

<div class='col-md-2'>$pro_name</div>
<div class='col-md-2'><input type='text' class='form-control qty' pid='$pro_id' id='$qty-$pro_id' value='$qty' ></div>
<div class='col-md-2'><input type='text' class='form-control price' pid='$pro_id' id='$price-$pro_id' value='$pro_price' disabled></div>
<div class='col-md-2'><input type='text' class='form-control total' pid='$pro_id' id='$total-$pro_id' value='$total' disabled></div>

JQUERY:

$("body").delegate(".qty","keyup", function(){   
    var pid = $(this).attr("pid");          
    var qty = $("#qty-"+pid).val();
    var price = $("#price-"+pid).val();
    var total = qty * price;        
    alert(total);
})

Jquery alert returns NaN.

what are you trying to do ? there is no need to ut $ in htm fields — Nalin Aggarwal, Aug 25 '16 at 18:50
I'm working on practice project from this video:https://www.youtube.com/watch?v=XVivL6cupxo&list=PLB_Wd4-5SGAbYqmJ4OVF24g0lNFnUap-W&index=22 . My problem starts on 6:45 . I don't get total alert — Vedran Brendy, Aug 25 '16 at 21:30

score 1 · Answer 1 · answered Aug 25 '16 at 20:09

One problem you have initially is with your selector syntax. If you want to use special characters in jQuery's selector, aka '$', you must escape them with double slashes '\\' like I have done in the example below.

The values you have currently are obviously not numbers but even if they were, you would still receive 'NAN'. You must use parseInt() on the value parameters as the values themselves are considered strings, not numbers.

parseInt() accepts two parameters. The first being the value you would like to convert into an integer and the second being the radix. In my example I used a radix of '10' which converts the values to a simple decimal number.

If you'd like to learn more about parseInt here's a link: http://www.w3schools.com/jsref/jsref_parseInt.asp

I went ahead and set your two input variable's default values to actual numbers so you can test for yourself.

$(document).ready(function() {
  $("body").delegate(".qty","keyup", function(){   
    var pid = $(this).attr("pid");          
    var qty = parseInt($("#\\$qty-"+'\\'+pid).val(), 10);    
    var price = parseInt($("#\\$price-"+'\\'+pid).val(), 10);   
    var total = qty * price;        
    alert(total);    
})
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  
<div class='col-md-2'>$pro_name</div>
  
<div class='col-md-2'><input type='text' class='form-control qty' pid='$pro_id' id='$qty-$pro_id' value='2'></div>
  
<div class='col-md-2'><input type='text' class='form-control price' pid='$pro_id' id='$price-$pro_id' value='5' disabled></div>
  
<div class='col-md-2'><input type='text' class='form-control total' pid='$pro_id' id='$total-$pro_id' value='$total' disabled></div>
  
</body>

score 0 · Answer 2 · answered Aug 25 '16 at 18:54

0

Your total value is not numeric, it is a string and you try to multiple two strings so you get a nan. Change your values to some numeric data and try it then.

answered Aug 25 '16 at 18:54

user3378165

5,189
15
49
86

score 0 · Answer 3 · edited May 23 '17 at 10:33

0

Use the below code. No of errors in your code.

No need to use '$' with the html fields.
you have disbale the price field, where you need to enter the value.

More on what to use with html Id attribute, check this SO link

<div class='col-md-2'>
    <input type='text' class='form-control qty' pid='pro_id' id='qty_pro_id'  ></div>
    <div class='col-md-2'><input type='text' class='form-control price' pid='pro_id' id='price_pro_id' ></div>
    <div class='col-md-2'><input type='text' class='form-control total' pid='pro_id' id='total_pro_id' disabled>
</div>

$("body").delegate(".qty,.price","keyup", function(){   

  var pid = $(this).attr("pid");              
  var qty = $("#qty_"+pid).val();
  var price = $("#price_"+pid).val();
  var total = qty * price;        
  alert(total);
})

JS Fiddle

edited May 23 '17 at 10:33

Community

1
1

answered Aug 25 '16 at 19:06

Nalin Aggarwal

880
5
8

This code was not helpful. maybe I did not give all the information. https://www.youtube.com/watch?v=XVivL6cupxo My problem starts on 6:45 . I don't get total alert – Vedran Brendy Aug 26 '16 at 18:41
what is missing here ? – Nalin Aggarwal Aug 26 '16 at 18:42
qty will be input field where customer increases number of products, price is already in database. Total must multiply these two values,and total price need to be instantly changed in disabled field. Jquery in this case is only check is it everything ok, but I get NaN Check this fiddle jsfiddle.net/ufqsmLwy @VedranBrendy – Nalin Aggarwal --this is not what I need – Vedran Brendy Aug 26 '16 at 22:08

jquery alert returns NaN

3 Answers3