CODEWITHSUNDEEP
javascripthtml
user1135192
user1135192

Reputation: 91

Comparing two select elements values

I've been been trying to look for a piece of javascript code that compares the values selected by a user in a html form from two <select> tags. So if the user selects a minimum value that is greater than the maximum number an alert box in javascript should be displayed.

For example, if the user selects 5 bedrooms from the the MINIMUM bedrooms dropdown list and then 3 bedrooms from the MAXIMUM bedrooms dropdown list, this should not allow the form to be processed when the submit button is clicked. But is fine when 3 is selected from the MINIMUM dropdown list and 5 from the MAXIMUM dropdown list.

<form name="search" action="page3.php" method="GET">
    <select name="minimumBeds">
       <option value="1"> 1 </option>
       <option value="2"> 2 </option>
       <option value="3"> 3 </option>
       <option value="4"> 4 </option>
       <option value="5"> 5 </option>
    </select>


    <select name="maximumBeds">
       <option value="1"> 1 </option>
       <option value="2"> 2 </option>
       <option value="3"> 3 </option>
       <option value="4"> 4 </option>
       <option value="5"> 5 </option>
    </select>
</form>

Upvotes: 0

Views: 5056

Answers (2)

David Thomas
David Thomas

Reputation: 253308

You could achieve your end result with the following, though I'm trying to prevent the possibility of errors happening, rather than firing an alert after the fact:

var minB = document.getElementById('min'),
    maxB = document.getElementById('max'),
    min, max;

function setLimits(elem, other) {
    var opts = other.getElementsByTagName('option');
    if (elem.id == 'min') {
        for (var i = 0; i < elem.selectedIndex; i++) {
            opts[i].disabled = 'disabled';
        }
    }
    else if (elem.id == 'max') {
        for (var i = opts.length-1; i>elem.selectedIndex; i--) {
            opts[i].disabled = 'disabled';
        }
    }
}

minB.onchange = function() {
    setLimits(minB, maxB);
};
maxB.onchange = function() {
    setLimits(maxB, minB);
};​

JS Fiddle demo.

This assumes that the option elements will be identical between the two select elements. Effectively it prevents someone from selecting a maximum number of bedrooms that's less than their minimum (and vice versa).

Edited the code to allow for changes to the selection to re-enable the options, using an if/else block:

var minB = document.getElementById('min'),
    maxB = document.getElementById('max');

function setLimits(limit, opts, lower, upper) {
    for (var i = 0; i < limit; ++i) {
        opts[i].disabled = lower;
    }
    for (var i = limit; i < opts.length; ++i) {
        opts[i].disabled = upper;
    }
}

function setLowerLimit(limit, elem) {
    var opts = elem.getElementsByTagName('option');
    setLimits(limit, opts, 'disabled', false);
}

function setUpperLimit(limit, elem) {
    var opts = elem.getElementsByTagName('option');
    setLimits(limit+1, opts, false, 'disabled');
}

/* Traditional event registration used to illustrate the above only.
 Production code should use a more modern method (addEventListener/attachEvent, 
 wrapped in a convenience function to make it work across browsers).
 */
minB.onchange = function() {
    setLowerLimit(minB.selectedIndex, maxB);
};
maxB.onchange = function() {
    setUpperLimit(maxB.selectedIndex, minB);
};

JS Fiddle demo.

References:

Upvotes: 2

gdoron
gdoron

Reputation: 150253

To simplify it, let's suppose those <select>s have id

if (parseInt(document.getElementById('min').value, 10)  > 
    parseInt(document.getElementById('max').value, 10)) 
{
    alert('ERRROR');
}

LIVE DEMO

Upvotes: 2

Related Questions