ThEBiShOp ThEBiShOp - 1 month ago 5
jQuery Question

input change detection not working while using a mask

I have a text field, I detect the changes with jQuery, then I de/activate a button if the value > 1000 (it's supposed to contain a price).
It's working fine.

Now I want to apply a mask on my input to format the value and restrict the characters like that :
99 999 999,99

the mask is working but then, the changes detection doesn't work anymore...

I'm using autoNumeric for my mask :
https://github.com/BobKnothe/autoNumeric

I've created 2 examples with jsfiddle :



Here is my javascript code :

function activeInvoice(priceField) {
console.log(priceField.val());
var val = (priceField.val() >= 1000);
$('#invoice_file').prop('disabled', !val);
$('#invoice_file').prop('required', val);
}

$(function () {
$('#price').autoNumeric("init", {
aSep: ' ',
aDec: ','
});

var priceField = $('#price');
activeInvoice(priceField);

$(document).on('input', '#price', function () {
activeInvoice($(this));
});
});


I would like to have both working, of course !

Thanks

Answer

Try with this code:

        function activeInvoice(priceField) {            
            var priceField_value = priceField.val().replace(/ +/g, '');                
            var val = (parseInt(priceField_value) >= 1000);
            $('#invoice_file').prop('disabled', !val);
            $('#invoice_file').prop('required', val);
        }

        $(function () {
            $('#price').autoNumeric("init", {
                aSep: ' ',
                aDec: ','
            });
            
            var priceField = $('#price');
            activeInvoice(priceField);
            
           $(document).on('keyup', '#price', function () { activeInvoice($(this)); });
        });
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/autonumeric/1.9.46/autoNumeric.js"></script>

<input id="price" type="text" />
<input id="invoice_file" type="button" value="test" />

Comments