CODEWITHSUNDEEP
jquery
ThEBiShOp
ThEBiShOp

Reputation: 516

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

Upvotes: 0

Views: 2595

Answers (1)

Soliyappan
Soliyappan

Reputation: 666

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" />

Upvotes: 1

Related Questions