PDA

View Full Version : Enabling an input when an option is chosen

Josh
05-22-2004, 10:47 AM
What I want to do is this:

When somebody chooses "other" from a select box, it enables an input box that allows for people to enter what the other is.

I imagine it's pretty simple, but I have no idea how to do it.

Thanks for any help.

Josh
coothead
05-22-2004, 02:39 PM
Hi there Josh,

I thought it would be simple,
but had a lot of trouble with....

I.E :supereek:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>disabled input</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<script type="text/javascript">
//<![CDATA[

function turnOn(){

var list=document.forms[0].elements[0];

if(list.options[list.selectedIndex].text=="other"){

document.forms[0].elements[1].disabled=false;
document.forms[0].elements[1].focus();
}
}
//]]>
</script>

</head>
<body>

<form action="">

<div>
<select onchange="turnOn()">
<option>selections</option>
<option>this </option>
<option>that</option>
<option>other</option>
</select>

<input type="text"disabled="disabled"/>
</div>

</form>

</body>
</html>
Josh
05-22-2004, 02:55 PM
IE :rolleyes:

Thanks coot, I'll try it out in a little and let you know. :)

Josh
agent002
05-23-2004, 08:42 AM
Hi Coothead,
configuring the element numbers in the document.forms[0].elements array isn't maybe the easiest thing to do... so I would suggest giving it a name instead. And using this to pass the select's object handle easily. You should maybe also disable the input in case the user chooses another option after choosing Other... Additionally, I prefer detecting the Other option based on its value rather than its .text, so the .text could be anything...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>disabled input</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[

function turnOn(objSelect, objForm, objEnable){
if(objSelect.options[objSelect.selectedIndex].value == 'other'){
objForm[objEnable].disabled = false;
objForm[objEnable].focus();
}
else{
objForm[objEnable].disabled = true;
}
}

//]]>
</script>
</head>
<body>

<form action="">
<div>

<select onchange="turnOn(this, this.form, 'turnMeOn');">
<option>selections</option>
<option>this </option>
<option>that</option>
<option value="other">other</option>
</select>

<input type="text" name="turnMeOn" disabled="disabled"/>

</div>
</form>

</body>
</html>
You can use this easily even if you have several dropdowns that require an input field for the Other option :)
Josh
05-23-2004, 11:10 AM
Thanks jere :)
Josh
05-23-2004, 01:23 PM
Hi Jere, how can I make it change background colors? So when it's disabled it's gray, enabled it's white.
agent002
05-23-2004, 01:39 PM
Then you should use readonly rather than disabled... this way:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>disabled input</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[

function turnOn(objSelect, objForm, objEnable){
if(objSelect.options[objSelect.selectedIndex].value == 'other'){
objForm[objEnable].readOnly = false;
objForm[objEnable].className = objForm[objEnable].className.replace(/\s*disabled/, '');
objForm[objEnable].focus();
}
else{
objForm[objEnable].className += ' disabled';
objForm[objEnable].readOnly = true;
}
}

//]]>
</script>
<style type="text/css">

.disabled {
background-color: #999999;
}

</style>
</head>
<body>

<form action="">
<div>

<select onchange="turnOn(this, this.form, 'turnMeOn');">
<option>selections</option>
<option>this </option>
<option>that</option>
<option value="other">other</option>
</select>

<input type="text" name="turnMeOn" readonly="readonly" class="disabled" />

</div>
</form>

</body>
</html>
It sets/removes the disabled class name to/from the input field, so you can configure the styles when disabled easily in the style sheet. :)
Josh
05-23-2004, 01:43 PM
Thanks, but it doesn't seem to be working

<select onchange="turnOn(this, this.form, 'turnMeOn');">
<option>selections</option>
<option>this </option>
<option>that</option>
<option value="other">other</option>
</select>

<input type="text" name="turnMeOn" readonly="readonly" class="disabled" />
agent002
05-23-2004, 01:54 PM
whoops! I seem to be adding the disabled class name every time an option is selected... change this part of the code:
objForm[objEnable].className += ' disabled';
to:
if(objForm[objEnable].className.match(/\s*disabled/) == null){
objForm[objEnable].className += ' disabled';
}
and it is fixed :)
Josh
05-23-2004, 01:56 PM
Works great, thanks!