SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru ripcurlksm's Avatar
    Join Date
    Aug 2004
    Location
    San Clemente, CA
    Posts
    859
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    javascript to hide and 'disable' hidden dropdown

    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:
    Code JavaScript:
    <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>
    Code HTML4Strict:
    <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. #2
    SitePoint Guru ripcurlksm's Avatar
    Join Date
    Aug 2004
    Location
    San Clemente, CA
    Posts
    859
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Code JavaScript:
    <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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •