Log in

View Full Version : Enabling a text field using a <SELECT> input


junestag
11-20-2009, 12:56 AM
I'm trying to enable a disabled text field based on a specific value being selected in a <SELECT> box. Here's the code I'm using:

// JavaScript Document
function showhideYearsInAlaska(obj) {
txt = document.getElementById('residency').options.selectedIndex.value;
if ( txt == 'Alaska' ) {
document.getElementById('years_in_alaska').disabled = false;
}
}

The code for calling this function from the <SELECT> box is as follows:

<p>
<label for="residency">In what state do you claim official residency?</label>
<select name="residency" id="residency" tabindex="18" onchange="showhideYearsInAlaska(this)">
<option value="select">Select a State</option>
<option value="Alaska" id="Alaska">Alaska</option>
</select>
</p>
<p>
<label for="years_in_alaska">If you claim Alaska residency, how long have you been physically in Alaska?</label>
<input type="text" name="years_in_alaska" id="years_in_alaska" disabled="true" />
</p>

However, it's not working...and I don't understand why not.
jscheuer1
11-20-2009, 06:06 AM
You could get sort of what I think you want via this tortured path:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function showhideYearsInAlaska(obj) {
var txt = document.getElementById('residency').options[document.getElementById('residency').options.selectedIndex].value;
if ( txt == 'Alaska' ) {
document.getElementById('years_in_alaska').disabled = false;
}
}
</script>
</head>
<body>
<p>
<label for="residency">In what state do you claim official residency?</label>
<select name="residency" id="residency" tabindex="18" onchange="showhideYearsInAlaska(this)">
<option value="select">Select a State</option>
<option value="Alaska" id="Alaska">Alaska</option>
</select>
</p>
<p>
<label for="years_in_alaska">If you claim Alaska residency, how long have you been physically in Alaska?</label>
<input type="text" name="years_in_alaska" id="years_in_alaska" disabled="true" />
</p>
</body>
</html>

Note: Both the obj argument and the this parameter passed to it are unused.

Here is a much simpler method that also allows for the field to become disabled again should the user change their selection:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function showhideYearsInAlaska(val) {
document.getElementById('years_in_alaska').disabled = val !== 'Alaska';
}
</script>
</head>
<body>
<p>
<label for="residency">In what state do you claim official residency?</label>
<select name="residency" id="residency" tabindex="18" onchange="showhideYearsInAlaska(this.value)">
<option value="select">Select a State</option>
<option value="Alaska" id="Alaska">Alaska</option>
</select>
</p>
<p>
<label for="years_in_alaska">If you claim Alaska residency, how long have you been physically in Alaska?</label>
<input type="text" name="years_in_alaska" id="years_in_alaska" disabled="true" />
</p>
</body>
</html>

Now, this just deals with the field becoming enabled or disabled though, which is different from hiding and showing the field. I think you are just going for enabled/disabled. But if you want more, be specific.
junestag
11-20-2009, 08:36 PM
Thank you jscheuer1. That worked very well indeed.