Javascript to hide and 'disable' hidden dropdown

JavaScript
1

I have this nifty little javascript and three radio buttons. Depending on what radio button is selected, it will hide/show a hidden div that contains a dropdown pertaining to each drop down.

The problem is that even though the div’s are hidden, the ‘hidden’ drop downs are still on the page and are defaulting to the last drop down.

I need to modify this script so that is hides the other two div’s (as it currently does) AND disables the other dropdowns that are not shown so they do not get $POST’ed.

Here is the script:


<script>
function showonlyone(thechosenone) {
      var newboxes = document.getElementsByTagName("div");
            for(var x=0; x<newboxes.length; x++) {
                  name = newboxes[x].getAttribute("name");
                  if (name == 'newboxes') {
                        if (newboxes[x].id == thechosenone) {
                        newboxes[x].style.display = 'block';
                  }
                  else {
                        newboxes[x].style.display = 'none';
                  }
            }
      }
}
</script>


<form name="test" method="post" action="test2.php">	
	
    <input type="radio" onClick="javascript:showonlyone('newboxes1');" checked="checked" name="product_id" value="GLOBAL PRODUCT 1"/><strong class="blue">GLOBAL PRODUCT 1</strong><br/>	
    <input type="radio" onClick="javascript:showonlyone('newboxes2');" name="product_id" value="U.S. MARKETS FOR PRODUCT 1"/><strong class="blue">U.S. MARKETS FOR PRODUCT 1</strong><br/>
    <input type="radio" onClick="javascript:showonlyone('newboxes3');" name="product_id" value="OUTSIDE U.S. MARKETS FOR PRODUCT 1"/><strong class="blue">OUTSIDE U.S. MARKETS FOR PRODUCT 1</strong><br/>
    <br/>

 <div style="display: block;" id="newboxes1" name="newboxes">
 	License Type: <br/>
    <select id="license_type1" name="license_type">
        <option value="$100 Single">Single License - $100</option>
        <option value="$200 Corporate">Corporate License - $200</option>
    </select>
 </div>

 <div style="display: none;" id="newboxes2" name="newboxes">
 	License Type: <br/>
    <select id="license_type2" name="license_type">
        <option value="$75 Single">Single License - $75</option>
        <option value="$150 Corporate">Corporate License - $150</option>
    </select>
 </div>

 <div style="display: none;" id="newboxes3" name="newboxes">
 	License Type: <br/>
    <select id="license_type3" name="license_type">
        <option value="$60 Single">Single License - $60</option>
        <option value="$125 Corporate">Corporate License - $125</option>
    </select>
 </div>

<p><input type="submit" value="BUY NOW" alt="Buy Now"/>

</form>

Here is it working (you can see the problem when you submit the form):
http://psylicyde.com/misc/javascript-disable/test1.php

2

ok so im sure this could have been done more eloquently, but here is my working script, with three functions… inside each function it disabled and hides the non selected options and shows and enables the selected option

<script>
function selectOptionOne(){
	// enable one
	document.getElementById("license_type1").style.display = 'block';
	document.getElementById("license_type1").disabled = false;
	// disable two
	document.getElementById("license_type2").disabled = true;
	document.getElementById("license_type2").style.display = 'none';
	// disable three
	document.getElementById("license_type3").disabled = true;
	document.getElementById("license_type3").style.display = 'none';
}

function selectOptionTwo(){
	// disable one
	document.getElementById("license_type1").disabled = true;
	document.getElementById("license_type1").style.display = 'none';	
	// enable two
	document.getElementById("license_type2").style.display = 'block';
	document.getElementById("license_type2").disabled = false;	
	// disable three
	document.getElementById("license_type3").disabled = true;
	document.getElementById("license_type3").style.display = 'none';	
}

function selectOptionThree(){
	// disable one
	document.getElementById("license_type1").disabled = true;
	document.getElementById("license_type1").style.display = 'none';	
	// disable two
	document.getElementById("license_type2").disabled = true;
	document.getElementById("license_type2").style.display = 'none';	
	// enable three
	document.getElementById("license_type3").style.display = 'block';
	document.getElementById("license_type3").disabled = false;	
}
</script>


<form name="test" method="post" action="test2.php">	
	
    <input type="radio" onClick="javascript:selectOptionOne();" checked="checked" name="product_id" value="GLOBAL PRODUCT 1"/><strong class="blue">GLOBAL PRODUCT 1</strong><br/>	
    <input type="radio" onClick="javascript:selectOptionTwo();" name="product_id" value="U.S. MARKETS FOR PRODUCT 1"/><strong class="blue">U.S. MARKETS FOR PRODUCT 1</strong><br/>
    <input type="radio" onClick="javascript:selectOptionThree();" name="product_id" value="OUTSIDE U.S. MARKETS FOR PRODUCT 1"/><strong class="blue">OUTSIDE U.S. MARKETS FOR PRODUCT 1</strong><br/>
    <br/>

 	License Type: <br/>

    <select id="license_type1" name="license_type">
        <option value="$100 Single">Single License - $100</option>
        <option value="$200 Corporate">Corporate License - $200</option>
    </select>


    <select id="license_type2" name="license_type" disabled="disabled" style="display: none;">
        <option value="$75 Single">Single License - $75</option>
        <option value="$150 Corporate">Corporate License - $150</option>
    </select>


    <select id="license_type3" name="license_type" disabled="disabled" style="display: none;">
        <option value="$60 Single">Single License - $60</option>
        <option value="$125 Corporate">Corporate License - $125</option>
    </select>


		

<p><input type="submit" value="BUY NOW" alt="Buy Now"/>

</form>