Change drop down values on radio button select
For a real estate search I need to populate the Minimum Price and Maximum Price dropdowns differently depending on whether the user selects 'Buy' or 'Rent'
The code I use at the moment is...
<form id="form2" name="form1" action="internationalsearchrefine.php" method="get">
<input name="saleOrRent" type="radio" class="radiogap" id="saleOrRent" value="sales" checked="checked" />
<span class="buyrent">Buy</span>
<input name="city" type="hidden" id="city" value="456">
<input name="intsearch" type="hidden" id="insearch" value="GBR">
<span class="copy">
<input name="saleOrRent" type="radio" class="radiogap" id="saleOrRent2" value="rent" />
</span><span class="buyrent">Rent</span>
<div>
<select name="min" class="select" id="min">
<option value="0" selected>Minimum Price</option>
<option value="250">£250</option>
<option value="500">£500</option>
<option value="750">£750</option>
<option value="1000">£1,000</option>
<option value="2000">£2,000</option>
<option value="4000">£4,000</option>
<option value="7000">£7,000</option>
<option value="10000">£10,000</option>
<option value="15000">£15,000</option>
<option value="25000">£25,000</option>
<option value="50000">£50,000</option>
<option value="75000">£75,000</option>
<option value="100000">£100,000</option>
<option value="150000">£150,000</option>
<option value="200000">£200,000</option>
<option value="400000">£400,000</option>
<option value="500000">£500,000</option>
<option value="600000">£600,000</option>
<option value="700000">£700,000</option>
<option value="800000">£800,000</option>
<option value="900000">£900,000</option>
<option value="1000000">£1,000,000</option>
<option value="1250000">£1,250,000</option>
<option value="1500000">£1,500,000</option>
<option value="2000000">£2,000,000</option>
<option value="3000000">£3,000,000</option>
<option value="6000000">£6,000,000</option>
<option value="10000000">10,000,000</option>
</select>
</div>
<div>
<select name="max" class="select" id="max">
<option value="1000000000" selected>Maximum Price</option>
<option value="500">£500</option>
<option value="750">£750</option>
<option value="1000">£1,000</option>
<option value="2000">£2,000</option>
<option value="4000">£4,000</option>
<option value="7000">£7,000</option>
<option value="10000">£10,000</option>
<option value="15000">£15,000</option>
<option value="25000">£25,000</option>
<option value="50000">£50,000</option>
<option value="75000">£75,000</option>
<option value="100000">£100,000</option>
<option value="150000">£150,000</option>
<option value="200000">£200,000</option>
<option value="400000">£400,000</option>
<option value="500000">£500,000</option>
<option value="600000">£600,000</option>
<option value="700000">£700,000</option>
<option value="800000">£800,000</option>
<option value="900000">£900,000</option>
<option value="1000000">£1,000,000</option>
<option value="1250000">£1,250,000</option>
<option value="1500000">£1,500,000</option>
<option value="2000000">£2,000,000</option>
<option value="3000000">£3,000,000</option>
<option value="6000000">£6,000,000</option>
<option value="10000000">10,000,000</option>
</select>
</div>
<br>
<div>
<select name="bedrooms" class="select" title="Bedrooms" id="bedrooms">
<option value="">Any</option>
<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>
<option value="6">6</option>
<option value="7">7</option>
<option value="6">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
</div>
<br>
<input name="submit" type="image" id="submit" src="images/searchwhite.png" alt="Add to Basket" />
<br>
</form>The values are not dynamic which hopefully makes this easier.
Any ideas how to do this?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Post the javascript.
ASKER
Actually what actually happens is initially both maximum values show
Then when you click just the single maximum shows
Then when you click just the single maximum shows
ASKER
<script type="text/javascript">$(d
$("input[name$='saleOrRent
var radio = $(this).val();
if(radio=='sales') {
$("#div_sales").show();
$("#div_rent").hide();
}
else if(radio=='rent') {
$("#div_rent").show();
$("#div_sales").hide();
}
});
});
</script>
$("input[name$='saleOrRent
var radio = $(this).val();
if(radio=='sales') {
$("#div_sales").show();
$("#div_rent").hide();
}
else if(radio=='rent') {
$("#div_rent").show();
$("#div_sales").hide();
}
});
});
</script>
Though it seems to be working fine for me using the js sample I gave. You just need a display:none on the rental div at page load.
You also need to give your rental dropdowns a unique name
You also need to give your rental dropdowns a unique name
ASKER
Got it working in the end, it was a conflict with the jsavascript i use using to style the dropdowns.
Just one problem. When a search is submitted the values from the hidden div are sent in the URL which means not all results show.
If for instance i'm searching a property for sale between min - 0 & max - 100000 the values from the 'rent' forms that have default values of min '0' and max '10000'
So properties for sale between o & 10000 display of which there aren't many in London!
Perhaps PHP is the answer so the unwanted div is truly hidden? unless this can be achieved with Javascript?
The dropdowns for both sales and rent need to be called the same by the way (min & max) as they both go to the same results page which has a query looking for these values.
Just one problem. When a search is submitted the values from the hidden div are sent in the URL which means not all results show.
If for instance i'm searching a property for sale between min - 0 & max - 100000 the values from the 'rent' forms that have default values of min '0' and max '10000'
So properties for sale between o & 10000 display of which there aren't many in London!
Perhaps PHP is the answer so the unwanted div is truly hidden? unless this can be achieved with Javascript?
The dropdowns for both sales and rent need to be called the same by the way (min & max) as they both go to the same results page which has a query looking for these values.
Keeping the same names you could just destroy the other div on page submit.
if( $("div_sales").is(":visibl
$("div_rent").remove()}
else{
$("div_sales").remove()}
Or the other option, which is probably easier, is move the the two divs (rent/sales) outside the form tag and hide them, add another div (e.g. id="price_wrapper") in place of the two dropdowns, add the initial buy div into that div and change the javascript above to set the text of the div to either of the divs
Hope I'm not confusing you.
if( $("div_sales").is(":visibl
$("div_rent").remove()}
else{
$("div_sales").remove()}
Or the other option, which is probably easier, is move the the two divs (rent/sales) outside the form tag and hide them, add another div (e.g. id="price_wrapper") in place of the two dropdowns, add the initial buy div into that div and change the javascript above to set the text of the div to either of the divs
$(document).ready(function(){
$(“input[name$='saleOrRent']“).click(function(){
var radio = $(this).val();
if(radio==’sales’) {
$(“#price_wrapper”).html($("div_sales).html());
}
else if(radio==’rent’) {
$(“#price_wrapper”).html($("div_sales).html());
}
});
});Hope I'm not confusing you.
ASKER
Not at all, just about keeping up!
Can you not change your code on the page you're posting to to check the value of the radio button and then reference the correct dropdown (with their names changed for the rental dropdowns)
ASKER
It's almost working, the prices change in the dropdowns depending of which radion button is selected. It's just missing the minimum price drop downs, can't figure out why?
This is how is looks in Dreamweaver...
and the code i'm now using...
Open in new window