CODEWITHSUNDEEP
jqueryhtml
z0mbieKale
z0mbieKale

Reputation: 1028

How to check if two select boxes are select and ones value is bigger than the others?

Trying to check if one checkbox value is bigger than the others. If yes, then enable "add" button, if not, disable it.

For some reason it is acting up really weird: when I try with small numbers (from 0-8) it works fine, but with bigger numbers, it just disabled the button, even when the value is bigger than the other.

My guess is that my selector is wrong for selecting both select boxes. How to check if two select boxes are select and ones value is bigger than the others?

Code:

$('.ageSelect').on('change', function() {

    var ageToVal = $("#ageTo").val();
    var ageFromVal = $("#ageFrom").val();
    console.log("from value is "+ageFromVal);

    console.log("to value is "+ageToVal);

    if(ageToVal <= ageFromVal){
        console.log("SMALLLER");
        $("#addChildAge").prop("disabled", true);

    }else{
        console.log("BIGGGER");
        $("#addChildAge").prop("disabled", false);
    }
});


<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <select class="selectpicker ageSelect" data-live-search="true" id="ageFrom" name="ageFrom" data-bv-excluded="false">
                <optgroup class="userProfileAgeFrom">
                    <option disabled selected value="defaultAge">
                        Age from...
                    </option>
                </optgroup>
            </select>
        </div>
        <div class="form-group">
            <select class="selectpicker ageSelect" data-live-search="true" id="ageTo" name="ageTo" data-bv-excluded="false">
                <optgroup class="userProfileAgeTo">
                    <option disabled selected value="defaultAge">
                        Age to...
                    </option>
                </optgroup>
            </select>
        </div>
    </div>
    <div class="col-md-2">
        <button type="button" id="addChildAge" name="addChildAge" class="btn btn-green">
            <i class="fa fa-plus" aria-hidden="true"></i> Lisa
        </button>
    </div>
</div>

Fiddle is here https://jsfiddle.net/uv6133xm/

Upvotes: 0

Views: 38

Answers (2)

Milind Anantwar
Milind Anantwar

Reputation: 82231

You need to parse the values before comparison:

 if(parseInt(ageToVal,10) <= parseInt(ageFromVal,10)){

Upvotes: 1

Mir Gulam Sarwar
Mir Gulam Sarwar

Reputation: 2648

Convert to number

 var ageToVal = Number($("#ageTo").val());
 var ageFromVal = Number($("#ageFrom").val());

Upvotes: 1

Related Questions