CODEWITHSUNDEEP
jqueryformshtmlinput
aleation
aleation

Reputation: 4834

HTML5 input type number weird behaviour after "9"

my fiddle

So I have 2 fields, Bathrooms and (bathrooms) en suite.

I limited it so the en suite field can never be greater than bathrooms, and if you lower bathroom's value it changes the ensuite value so it stay the same.

The script is actually simple and works good, but I noticed that if I put on bathrooms number a value equal or higher than 9, it starts acting weird. If bathrooms is 15 for example, ensuite will jump straight from 1 to 15, and if you lower bathrooms it doesn't work anymore, it act like 20 or 2000 = 2 actually, ignoring the rest of the digits and taking the value of the first digit only.

html:

<label for="fbathrooms">Bathrooms</label><input id="fbathrooms" name="fbathrooms" type="number" min="0"/><br/>
<label for="fensuite" style="display:none">En Suite</label><input id="fensuite" name="fensuite" type="number" min="0" style="display:none;"/>​

code:

function bathroomsTrigger(){
    if($('#fbathrooms').val() > 0){
        $('#fensuite').slideDown('fast');
        $('label[for="fensuite"]').slideDown('fast');
    } else {
        $('#fensuite').slideUp('fast');
        $('label[for="fensuite"]').slideUp('fast');
        $('#fensuite').val(0);
    }

    if($('#fensuite').val() > $('#fbathrooms').val()){
        $('#fensuite').val($('#fbathrooms').val());
    }
}

function ensuiteTrigger(){
    if($('#fensuite').val() > $('#fbathrooms').val()){
        $('#fensuite').val($('#fbathrooms').val());
    }
}

$('#fbathrooms').keyup(bathroomsTrigger);
$('#fbathrooms').change(bathroomsTrigger);

$('#fensuite').keyup(ensuiteTrigger);
$('#fensuite').change(ensuiteTrigger);​

Driving me crazy, have been tweaking around for hours already xD

Help will be very appreciated.

(could it be an html5 bug?)

Upvotes: 1

Views: 413

Answers (1)

killercowuk
killercowuk

Reputation: 1343

Issue is in your ensuite trigger, you have not parsed the string value to integer for the greater than comparison.

change:

$('#fensuite').val() > $('#fbathrooms').val()

to:

parseInt($('#fensuite').val()) > parseInt($('#fbathrooms').val())

Upvotes: 5

Related Questions