Question

I have two select form fields. One is the “price_from”, the other is “price_to”. The problem is that I want to prevent the user for selecting for example price_from “10000” and price_to “1000”, so basically I must find some javascript function which sets the “price_to” field values based on “price_to” values onwards. ie : If I select the price_from =”3000″, the price_from field will display values from “4000”. And ofcourse vice-versa. If somebody changes the “price_to” or “price_from” field again.

Answer 1

Try this:

HTML:

<select id="from1" relatedTo="to1">
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="30">30</option>
    <option value="40">40</option>
</select>

<select id="to1" relatedTo="from1">
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="30">30</option>
    <option value="40">40</option>
</select>

<br/>

<select id="from2" relatedTo="to2">
    <option value="100">100</option>
    <option value="200">200</option>
    <option value="300">300</option>
    <option value="400">400</option>
</select>

<select id="to2" relatedTo="from2">
    <option value="100">100</option>
    <option value="200">200</option>
    <option value="300">300</option>
    <option value="400">400</option>
</select>

JavaScript:

// function to valide two selects
function validateSelects( fromSelector, toSelector ) {

    // registering the change event to the "to" select
    $( toSelector ).change(function() {

        var fromSelector = "#" + $(this).attr( "relatedTo" );
        var toSelector = "#" + $(this).attr( "id" );

        // compares the value of the selected item with the from select
        if ( $(this).val() > $( fromSelector ).val() ) {

            // selects the value of the from select
            $(this).val( $( fromSelector ).val() );

        }

    });

    // puts the gui in a valid state
    $( fromSelector ).change(function() {

        var fromSelector = "#" + $(this).attr( "id" );
        var toSelector = "#" + $(this).attr( "relatedTo" );

        // compares if the value of this field is less than the value of the "to" select
        if ( $(this).val() < $( toSelector ).val() ) {

            // if so, change the value of the "to" select
            $( toSelector ).val( $(this).val() );

        }

    });

}

validateSelects( "#from1", "#to1" );
validateSelects( "#from2", "#to2" );

jsFiddle: http://jsfiddle.net/davidbuzatto/YNL6R/

Edit: I inserted a custom atribute in each select to denote the select that they are binded.