CODEWITHSUNDEEP
phpformsdynamic
iamebet
iamebet

Reputation: 47

What's the best approach for a dynamic value-range select form?

I have created a real estate search function where in the user will input the price range. I have put two select fields to minimize user error, one for the minimum price and the other for maximum price. I want to utilize a dynamic form to further minimize entry error.

For example, the minimum price select has the following values:

While the maximum price select has the same as above but without $100k and with additional $2M+, with a default value of $200k.

What I want to happen is to have a function that will not only validate the entry on-page but also dynamically change the select options for the maximum price. So when the user selects a minimum price, the maximum price field options will not display the selected minimum price and below.

So at the start, if the user selects $500k minimum, the maximum automatically changes to $600k while removing from the options anything below it.

What's the best approach for this?

Thanks in advance!

Update: I followed Jake's answer and I can't make it work.

Here's the code of the form and script:

<form name="search" action="/search/" method="get">
<label>Price Range: </label>
Between:
<select name="min_price"> 
<option value="1">1M</option> 
<option value="2">2M</option> 
...
<option value="15">15M</option> 
<option value="20">20M</option> 
</select> 
and
<select name="max_price"> 
<option value="2">2M</option> 
<option value="3">3M</option> 
... 
<option value="30">30M+</option> 
</select> 
...
</form>

<script type="text/javascript"> 
$("#min_price").change(function(){
    var min = $(this).val();
    $("#max_price").find("option").each(function(){
        if (this.value <= min) {
            $(this).hide();
        }
        else {
            $(this).show();
        }
    });
});
</script>

I'm using wordpress and it has jQuery 1.4.4. How can I make it work? Is there an error on my html code?

Upvotes: 0

Views: 602

Answers (1)

Jake McGraw
Jake McGraw

Reputation: 56116

You can do this client side (in browser) using JavaScript. For example, with jQuery:

$("#min_price").change(function(){

    var min = $(this).val();
    $("#max_price").find("option").each(function(){
        if (this.value <= min) {
            $(this).hide();
        }
        else {
            $(this).show();
        }
    });

});

Upvotes: 2

Related Questions