Stack Exchange
Strange jquery bug in simple code
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

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


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

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

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

When using parseInt, use it like parseInt(str, 10) instead of parseInt(str). You should use parseFloat Is there something like parseDouble

@epascarello My mistake . Fixed

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

radix is an optional argument. And parseDouble should be parseFloat

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

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.
