Strange jquery bug in simple code

Question

I have a simple html code with form:

<span class="price"></span>
Enter amount: 
<input type="text" class="form-control amount" name="amount" value="500">

<!--Next input fields are hidden by Bootstrap class "hide"-->
<input type="text" name="minimal-amount" class="hide minimal-amount" value="500">
<input type="text" name="oneprice" class="hide oneprice" value="0.20">

<script>
$(".amount").on("change", function(){
        var am = $(".amount").val();
        var min = $(".minimal-amount").val()
        if(am<min){
            $(".amount").val($(".minimal-amount").val());
        }else{
            var am = $(".amount").val();
            var oneP = $(".oneprice").val();
            var finalPrice = am*oneP;
            $(".price").html(finalPrice);       
        }
});
</script>

Idea of this code is very simple. When user put in amount field digits, my script should check, if that, what user put is smaller than minimum available value in minimal-amount field, script changes value of amount field to default minimal-amount. But the problem is, that id I just add 0 in amount field (and it's value become 5000) everything is ok, but when I changes value of amount field to 1000, script changes value of amount field to default, as if it smaller them minimul-amount. What I do wrong, and how can I fix this problem? P.S. Example of this code you can find here - http://friendfi.me/tests/amount.php

Anoop Joshi P · Accepted Answer · 2014-06-20 13:09:03Z

1

You should parse the value before use. Because .val() will return only string type.

$(".amount").on("change", function(){
        var am = parseFloat($(".amount").val());
        var min = parseFloat($(".minimal-amount").val());
        if(am<min){
            $(".amount").val($(".minimal-amount").val());
        }else{
            var am = $(".amount").val();
            var oneP = $(".oneprice").val();
            var finalPrice = am*oneP;
            $(".price").html(finalPrice);       
        }
});

answered Jun 20, 2014 at 13:09

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Anoop Joshi P Over a year ago

@Satpal sorry i didnt get you. can you explain?

Sukima Over a year ago

Also calling $(".minimal-amount").val() twice seems silly when you already have the value in min.

Sukima Over a year ago

parseInt should take a radix value: parseInt("1234", 10)

Anoop Joshi P Over a year ago

@Satpal no. There is nothing like parseDouble. I edited the answer

Satpal Over a year ago

@Ingmars, Yep radix is an optional argument. but important. Read davidwalsh.name/parseint-radix

|

Sukima · Accepted Answer · 2014-06-20 14:04:43Z

There are a lot of gotchas in that code. Here is a working JSBin: http://jsbin.com/qilob/2/edit?html,js,output

Highlights

You need the DOM to be initialized before you can work with it. Wrapping this in a function passed to jQuery will make it wait till the page finishes loading before manipulating it.

$(function() { ... });

Use cached values since the elements are not going to change much. This saves the need to parse the selectors multiple times. It also saves on typing and readability.

var $amount         = $("#amount");
var $minimalAmount  = $("#minimal-amount");
var $onePrice       = $("#oneprice");
var $finalPrice     = $("#price");

When parsing a string to an Int you need to use parseInt

var amount = parseInt($amount.val(), 10);

Conversely when parsing a string to a Float you need to use parseFloat

var price = parseFloat($onePrice.val());

JavaScript can not handle float based arithmetic well. rounding errors are bad especially when dealing with money we need to move the decimal place to prevent rounding errors in the more significant parts of the price value.

var total = (amount * (price * 100)) / 100;

See it in action in the JSBin.

Collectives™ on Stack Overflow

Strange jquery bug in simple code

2 Answers 2

8 Comments

Highlights

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Highlights

Comments

Your Answer

Sign up or log in

Post as a guest

Related