Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question show form element with javascript

    HI All

    I am currently working on a form that needs some extra javascript.

    What I need to do is when a country is selected on the form from a drop down list. A hidden list will then need to appear with relevant states or areas.
    Anyone know how I should do this?

    I have put a copy of the form here:

    http://www.myparadox.co.uk/stream/

    Thank you

  • #2
    Regular Coder
    Join Date
    Jun 2008
    Location
    SE Wisconsin, US
    Posts
    222
    Thanks
    1
    Thanked 20 Times in 20 Posts
    You will want to do this on the drop-down:

    Code:
    onselect="javascript:document.getElementById("hiddenlistcontrolid").style.display = 'block'";
    Hope that helps.
    Milwaukee Web Designer and SEO Milwaukee Firm specializing in ASP.Net, C#, VB.Net, SQL Server and Access.

  • #3
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    @demtron,

    Events that are available on select tag are only onfocus, onblur and onchange:
    http://www.w3schools.com/TAGS/tag_Select.asp

    onselect is (usually) used for textarea and textboxes:
    http://www.w3schools.com/jsref/jsref_onselect.asp


    @jasongurr,

    Add the US states on the tag:
    Code:
    <select name="State" id="State">
    	<option>Alabama</option>
    	<option>Alaska</option>
    	<option>California</option>
    	<option>Florida</option>
    </select>
    What we need to do is to hide this tag on page's load:
    Code:
    document.getElementById('State').style.display='none'; // Hide state dropdown
    Now, we'll attach a function on the "country" dropdown that will show the "state" dropdown once USA is selected:
    Code:
    if(document.getElementById('country').value=='USA')
    	document.getElementById('state').style.display=''; // Show the state dropdown
    With that said, we could combine the snippets into:
    Code:
    <script type="text/javascript">
    window.addEventListener?window.addEventListener('load',function(){
    	ray.state('country','State'); // ID of the country dropdown, ID of the STATE dropdown
    	},false):
    window.attachEvent('onload',function(){
    	ray.state('country','State'); // ID of the country dropdown, ID of the STATE dropdown
    	}); // FF : IE
    
    var ray={
    	targ:'',
    	
    	state:function(el,targ){
    		this.targ=this.targ==''?targ:this.targ; // Get a copy of State dropdown
    		this.hide(this.targ); // Hide State dropdown by default
    		
    		this.getID(el).onchange=function(){
    			ray.hide(ray.targ,this.value=='USA'?false:null); // Hide/Show STATE base on selected country
    		}
    	},
    	
    	hide:function(el,bool){
    		this.getID(el).parentNode.style.display=(typeof bool=='undefined'||bool==null)?'none':'';
    	},
    	
    	getID:function(el){
    		return document.getElementById(el);
    	}
    }
    </script>
    Hope it helps.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph


  •  

    Posting Permissions

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