Help with changing DropDown event to Radio Button triggers - javascript

Question

Hi everyone,

I have a dropdown in my form (the code was provided) and when the second option (of2) in the drop down is selected, some form elements change. It all works fine.

What I want to be able to do is change the dropdown to two radio buttons instead.

Having the same form changes take place on selection of the second radio button (with the first being selected primarily on page load, by default).

This is the form code for the dropdown:

<form id="propsearch_res" name="propsearch_res" method="post">
  <select name="sales_rental" id="sales_rental" onChange="onChange(this.form)">
     <option value="S" selected="selected">Properties For Sale</option>
     <option value="L">Properties To Let</option>
  </select>
...  

and this is the current javascript which powers the change (and rest of form):

    <script type="text/javascript">  
  function nongeosearch() {
     document.form1.xstyle.value = "7";
  }
  function onChange(obj) {
    var Current = obj.sales_rental.selectedIndex;
    var n = 1;
  obj.price_low.options.length = 0;
  obj.price_high.options.length = 0;

  if (obj.sales_rental.value == "S")
    {
    setsel(obj,"Any Price","","0");
  setsel(obj,"£30,000","30000",n);n=n+1;
  setsel(obj,"£40,000","40000",n);n=n+1;
  setsel(obj,"£50,000+","",n);n=n+1;
    } else {
     setsel(obj,"Any p/month","","0");
  setsel(obj,"£300","300",n);n=n+1;
  setsel(obj,"£400","400",n);n=n+1;
  setsel(obj,"£500+","",n);n=n+1;
    }    
  }   
  $(document).ready(function() {
     onChange(document.propsearch_res);
  });
  function setsel(obj,val1,val2,n) {
     obj.price_low.options[n] = new Option(val1,val2);
     obj.price_high.options[n] = new Option(val1,val2);
  }
 </script>

This is what I tried with my two radio buttons
(It didnt work, but I think thats because something needs tweaking in the javascript :S)

<input type="radio" id="sales_rental" name="sales_rental" value="S" />
<input type="radio" id="sales_rental" name="sales_rental" value="L" onChange="onChange(this.form)" />

I have also tried:

<input ...onClick="onChange(this.form)" />

...without success.

Any help would be very much appreciated!

Thank you for reading

==== Still no joy... my radio buttons are now like this:

<input type="radio" name="sales_rental" checked value="S" />
<input type="radio" name="sales_rental" value="L" />

and the JS with your changes in (hopefully in the right place?):

<script type="text/javascript">  
    function nongeosearch() {
       document.form1.xstyle.value = "7";
    }
    function onChange(obj) {
var n = 1;
obj.price_low.options.length = 0;
obj.price_high.options.length = 0;

if (obj.find("input[name=sales_rental]").val() == "S")
{
         setsel(obj,"Any Price","","0");
    setsel(obj,"£30,000","30000",n);n=n+1;
    setsel(obj,"£40,000","40000",n);n=n+1;
    setsel(obj,"£50,000+","",n);n=n+1;
         } else {
          setsel(obj,"Any p/month","","0");
    setsel(obj,"£300","300",n);n=n+1;
    setsel(obj,"£400","400",n);n=n+1;
    setsel(obj,"£500+","",n);n=n+1;
         }    
    }        
    $(document).ready(function() {
        onChange(document.propsearch_res);
    });
    function setsel(obj,val1,val2,n) {
       obj.price_low.options[n] = new Option(val1,val2);
       obj.price_high.options[n] = new Option(val1,val2);
    }
</script>

Original Form Code (replace first drop down with 2 radio buttons)

        <form id="propsearch_res" name="propsearch_res" method="post" action="script_search.php"> 
            <fieldset><legend>Property Search Type</legend> 
                 <span><span id="propsearch1"> 
                    <label for="sales_rental"><img src="images/ico_search.png" alt="Property Search: Step 1" />Search:</label> 
                    <select name="sales_rental" id="sales_rental" onChange="onChange(this.form)"> 
                        <option value="S" selected="selected">Properties For Sale</option> 
                        <option value="L">Properties To Let</option> 
                    </select> 
                 </span></span> 
            </fieldset> 
            <p>Filter search by particulars</p> 
            <fieldset><legend>Search Particulars</legend> 
                <div id="propsearch2">                          
                    <div> 
                        <label for="PropTypwfld"><img class="house" src="images/ico_house.png" alt="Property Search: Step 2" />Search for a:</label> 
                        <select name="type" id="PropTypefld" size="1"> 
                            <option value="">Property</option> 
                            <script type="text/javascript" src="http://www.housescape.org.uk/cgi-bin/ptype.pl?ren1"&gt;&lt;/script&gt; 
                        </select> 
                    </div> 
                    <div> 
                        <label for="area">loacted in:</label> 
                        <select name="area" id="area" size="1"> 
                            <option value="">All Areas</option> 
                            <script type="text/javascript" src="http://www.housescape.org.uk/cgi-bin/arealist.pl?ren1"&gt;&lt;/script&gt; 
                        </select> 
                    </div> 
                    <div> 
                        <label for="Bedroomsfld">with a minimum:</label> 
                        <select name="num_beds" id="Bedroomsfld" size="1">                          
                            <option value="1">1 Bedroom</option> 
                            <option value="2">2 Bedrooms</option> 
                            <option value="3">3 Bedrooms</option> 
                            <option value="4">4 Bedrooms</option> 
                            <option value="5">5 Bedrooms</option> 
                            <option value="6">6 Bedrooms</option> 
                            <option value="">No Preference</option> 
                        </select> 
                    </div>                   
                    <div> 
                        <label for="price_low">between:</label> 
                        <select name="price_low" id="price_low" size="1"></select> 
                    </div> 
                    <div> 
                        <label for="price_high">and:</label> 
                        <select name="price_high" id="price_high" class="lastinput" size="1"></select> 
                    </div> 
                </div> 
            </fieldset> 
            <fieldset class="controls"> 
                <input name="xstyle" id="xstyle" type="hidden" value="" /> 
                <input name="submit" id="submit" type="submit" onClick="nongeosearch()" value="Search Properties" /> 
            </fieldset> 
        </form>  

Answer 1

Form: change the select element to this.

<label for="sales_rental0">Properties For Sale</label><input type="radio" id="sales_rental0" name="sales_rental" value="S" checked />
<label for="sales_rental1">Properties To Let</label><input type="radio" id="sales_rental1" name="sales_rental" value="L" />

change $(document).ready to this.

$(document).ready(function(){
    onChange(document.propsearch_res);

    $("input[name=sales_rental]").click(function(){
        onChange(document.propsearch_res);
    });
});

then you should also remove the id in your radio button since id is unique and remove the onChange event on the radio button.

For your onChange function change to this.

function onChange(obj) {
    var n = 1;
    obj.price_low.options.length = 0;
    obj.price_high.options.length = 0;

    if (getRadioButtonValue(obj.sales_rental) == "S")
    {
        setsel(obj,"Any Price","","0");
        setsel(obj,"£30,000","30000",n);n=n+1;
        setsel(obj,"£40,000","40000",n);n=n+1;
        setsel(obj,"£50,000+","",n);n=n+1;
    } else {
        setsel(obj,"Any p/month","","0");
        setsel(obj,"£300","300",n);n=n+1;
        setsel(obj,"£400","400",n);n=n+1;
        setsel(obj,"£500+","",n);n=n+1;
    }    
}   

Lastly add this function in your script.

function getRadioButtonValue(radio) {
    if(radio.length > 0) {
        for(var i=0; i<radio.length; i++) {
            if(radio[i].checked) {
                return radio[i].value;
            }
        }  
    }
}

Edit:

For the scripts dropdown menu's don't put the <scripts> inside the <select> tag.