...

View Full Version : show form element with javascript



jasongurr
01-31-2009, 09:21 PM
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

demtron
02-01-2009, 03:48 AM
You will want to do this on the drop-down:


onselect="javascript:document.getElementById("hiddenlistcontrolid").style.display = 'block'";

Hope that helps.

rangana
02-01-2009, 08:44 AM
@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:


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


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:


if(document.getElementById('country').value=='USA')
document.getElementById('state').style.display=''; // Show the state dropdown


With that said, we could combine the snippets into:


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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum