PDA

View Full Version : disabling dropdown when another dropdown = value

cscs
09-07-2002, 06:03 PM
hello.

i have two simple dropdowns on my signup page. one is for state, the other for country. i'm using php/mysql to populate the <option> tags, but i guess for the sake of my question that might not be important.

what i want to do is simply disable the STATE dropdown when the COUNTRY dropdown field != USA && != Canada:

if (document.submit_signup.country.value != "USA && document.submit_signup.country.value != "Canada" {
document.submit_signup.state.disabled = true;
}

i'm quite new to js, so i'm not quite certain about where / how this snippet of code can be placed. ie, do i put it at the top of the page with my other functions? or do i put just below the <select name=state> tag? or do i put it in an onClick in the state select tag?

and secondly, do i need to make this a function?

the way i want it to behave is like this -- the state dropdown will appear below the country dropdown. as the above code should be "live" at all times, by default, the state dropdown would be disabled, until the user selects either USA or Canada, at which point the state field will be disabled = false.

how might i go about this?

thanks for your time and help.
adios
09-07-2002, 11:53 PM
Not exactly sure how you intend to populate those 'state' boxes - but:


<html>
<head>
<title>untitled</title>
</head>
<body>
<script type="text/javascript">

function state_enable(sel) {
var sVal = sel[sel.selectedIndex].value;
var bVal = (sVal != 'USA' && sVal != 'Canada');
var canDisable = typeof sel.disabled != 'undefined';
if (canDisable && bVal) {
sel.form.state.selectedIndex = 0;
return true;
} else if (canDisable) return false;
else {
sel.form.state.onfocus = bVal ? function() {this.blur()} : null;
if (bVal) sel.form.state.selectedIndex = 0;
}
}

</script>
<form name="submit_signup">
<select name="country" onchange="state.disabled=state_enable(this)">
<option selected="selected">select</option>
<option value="USA">USA</option>
<option value="Canada">Canada</option>
<option value="poland">Poland</option>
</select>
<select name="state" disabled="disabled" onfocus="if(!this.disabled)this.blur()">
<option>select</option>
<option>option 1</option>
<option>option 2</option>
</select>
</form>
</body>
</html>

The extra business is for browsers that don't support element disabling (like, you know). Feel free to remove it...
cscs
09-09-2002, 12:29 AM
thank you very much for the code adios! i appreciate your time and i'll have a go at this. if i may ask, as i'm quite new to JS, what does this mean exactly?

sel[sel.selectedIndex].value;

is this the value of the selected form element in the form of an array?

thanks again!