Avatar of BrighteyesDesign
BrighteyesDesign
Flag for Afghanistan asked on

Change drop down values on radio button select

search
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>

Open in new window


The values are not dynamic which hopefully makes this easier.

Any ideas how to do this?
PHPJavaScriptHTML

Avatar of undefined
Last Comment
Gary

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Gary

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
BrighteyesDesign

ASKER
Great, thanks for that, makes sense.

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?

live
This is how is looks in Dreamweaver...

dreamweaver
and the code i'm now using...

<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="saleOrRent" value="rent" />
      </span><span class="buyrent">Rent</span>
      <div id="div_sales">
        <select name="min" class="select" id="min">
          <option value="0" selected>Minimum Price</option>
             <option value="250">£250</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>
        <br>
        <select name="max" class="select" id="max">
          <option value="1000000000" selected>Maximum Price</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 id="div_rent">
        <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>
      >
        </select>
        <br>
        <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>
   
        </select>
      </div>
      <br>
      <div>
        <select name="bedrooms" class="select" title="Bedrooms" id="bedrooms">
 <option value="" selected>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>

Open in new window

Gary

Post the javascript.
BrighteyesDesign

ASKER
Actually what actually happens is initially both maximum values show

initial
Then when you click just the single maximum shows

23
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
BrighteyesDesign

ASKER
<script type="text/javascript">$(document).ready(function(){
 $("input[name$='saleOrRent']").click(function(){
 var radio = $(this).val();
 if(radio=='sales') {
 $("#div_sales").show();
 $("#div_rent").hide();
 }
 else if(radio=='rent') {
 $("#div_rent").show();
 $("#div_sales").hide();
 }
 });
 });
                                            </script>
Gary

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
Gary

Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
BrighteyesDesign

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.
Gary

Keeping the same names you could just destroy the other div on page submit.

if( $("div_sales").is(":visible") ) {
$("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());
 }
 });
 });

Open in new window


Hope I'm not confusing you.
BrighteyesDesign

ASKER
Not at all, just about keeping up!
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
Gary

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)