Ad

Jquery Mobile Function On.change Works Only Sometimes

- 1 answer

I have this code in jsfiddle, this code is supposed to check for invalid numerical values like -12-12. So the bug arises if I type an invalid numerical value (eg. -12-11) it removes the input (which is the expected behavior) and the weird part is that the second time it doesn't call the document.on change function.

The steps to reproduce the problem are as follows:

  • Type 12 for example.

  • Click somewhere else like the other textbox and that number will be
    converted to decimal (12.00)

  • Type and incorrect number like -12-12 and click somewhere else and the textbox will get cleared out (which is the expected behaviour).
  • The second time you type that number in the textbox it doesn't change the value or clear the textbox.

    This is something that I don't understand, by trying to debug the code the second time you insert a wrong number that function doesn't get called so I was wondering why.

Any help is appreciated.

My javascript code:

$(document).on('change', 'input[type="number"]', function(event) {
    var target = $(event.target);
    var max = target.attr('max') - 0;
    var min = target.attr('min') - 0;
    var step = target.attr('step');
    var val = parseFloat(target.val());
    if(typeof max !== 'undefined' && val > max) {
        target.val(max);
    }
    else if(typeof min !== 'undefined' && val < min) {
        target.val(min);
    }
    else if(typeof step !== 'undefined') {
        if(step < 1) {
            target.val(parseFloat(target.val()).toFixed(step.split('.')[1].length));
        }
        else {
            debugger;
        }
    }
    else if(val + '' != target.val()) {
        target.val(val);
    }
});
Ad

Answer

I see your issue, and able to solve it. I suggest you to use blur event instead of change event of textbox. This will work like a charm.

Here is the code :

$(document).on('blur', 'input[type="number"]', function(event) {
    var target = $(event.target);
    var max = target.attr('max') - 0;
    var min = target.attr('min') - 0;
    var step = target.attr('step');
    var val = parseFloat(target.val());
    if(typeof max !== 'undefined' && val > max) {
        target.val(max);
    }
    else if(typeof min !== 'undefined' && val < min) {
        target.val(min);
    }
    else if(typeof step !== 'undefined') {
        if(step < 1) {
            target.val(parseFloat(target.val()).toFixed(step.split('.')[1].length));
        }
        else {
            debugger;
        }
    }
    else if(val + '' != target.val()) {
        target.val(val);
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="transaction_amount">Amount</label>
                <input type="number" data-mini="true" step="0.01" name="amount" min="0.01" max="1000000" id="transaction_amount" value="">
                <label for="transaction_external_identifier" id="payment-description-label">Check #</label>
                <input type="text" name="external_identifier" id="transaction_external_identifier" value="" data-mini="true">

Ad
source: stackoverflow.com
Ad