Enable/Disable Text Fields

[Jason64]

Hello,
I'm looking to Disable/Enable text fields using a drop down menu. Upon selecting an option from the dorpown list, a field becomes disabled or enabled. For this example let's say that I have 3 options in my drop down and 2 text fields I would like to effect. option 1: enable both text fields(from an initial disabled state). option 2: disable text fields from an initial enabled state. and finally, option 3: enables 1 field while leave the other disabled.

Can anyone help me with the code for this?? Please! I'm desperate.... :confused:

Jason64

[Jona]

Something like this onchange of your select box should work...


onchange="if(this.options.selectedIndex.index==0) {this.form.elements['name_of_input'].disabled=true;} else if(this.option.selectedIndex.index==1) {this.form.elements['name_of_input2'].disabled=true;} else {this.form.elements['name_of_input3'].disabled=true; this.form.elements['name_of_input2'].disabled=false;}"


[J]ona

[Jason64]

I'll give this a try...thanks!

Jason64

[Jona]

No problem.

[Jason64]

OK, I altered it a little and it don't work. It says that the planB statement isn't an object. I looked it over, looks fine to me. Here's my script:
<script>
function enableIt() {
if(myform.myDropDown.options.selectedIndex.index==0) {
myform.myDropDown.elements['planO'].disabled=true;
}

else if(myform.myDropDown.options.selectedIndex.index==1) {
myform.myDropDown.elements['planA'].disabled=true;
}
else {
myform.myDropDown.elements['planB'].disabled=true;
myform.myDropDown.elements['planA'].disabled=false;
}

} </script>


<form name="myform" method="post" action="">

<select onChange="enableIt()" name="myDropDown">
<option value="planO">--Choose One--</option>
<option value="planA">Severnace Plan A</option>
<option value="planB">Severance Plan B</option>
</select>

<input type="text" name="myTextBox" style="background-color:#CCCCCC;" disabled>

<input type="text" name="myTextBoxTwo" style="background-color:#CCCCCC;" disabled>

[Jona]

I thought you were trying to enable/disable the textboxes, not the select options. :confused:

[J]ona

[Daniel T]

in your script, change all of the "myform.--" to "document.myform.--"
this may not work, but it is the only thing i can think of
hope this helps,
-Dan

[Jason64]

nope...didn't do it. :mad:

[Jason64]

Sorry, Man, I missed your thread!

YES, I WANT TO DISABLE/ENABLE THE TEXTBOXES USING THE DROPDOWN TO DO IT....

there are 2 textboxes and 1 drop down containing 3 options.

Thanks,
Jason64

[Jona]

Then change the names to the names of the textboxes you want to disable/enable, rather than the select options.

[J]ona

[Jason64]

Jona,
I'll try that, DUH!, I caught that myself last night looking at my code and yours. I was like...wait a minute I want to affect the text boxes not the options, I wrote the above for the options! Sorry man, yesterday was a long day!

I'll give that a try and get back to ya. Thanks Again!
Jason64

[Jason64]

I don't error out now, but it seems to be skipping some of the arguments and going straight to the else...It don't make sense. I added the colors to differentiate which statement it's jumping to. Take a look:

<script>
function enableIt() {
if (myform.myDropDown.options.selectedIndex.index==1) {
this.myform.elements['myTextBox'].disabled=true;
this.myform.elements['myTextBox'].style.backgroundColor = '#CCCCCC';
}

else if(myform.myDropDown.options.selectedIndex.index==2) {
this.myform.elements['myTextBoxTwo'].disabled=true;
this.myform.elements['myTextBoxTwo'].style.backgroundColor = 'yellow';
}
else {
this.myform.elements['myTextBox'].disabled=false;
this.myform.elements['myTextBox'].style.backgroundColor = 'blue';
this.myform.elements['myTextBoxTwo'].disabled=false;
}

} </script>

Hmmmmm....

[Jona]

function enableIt() {
if (document.myform.myDropDown.options[document.myform.myDropDown.selectedIndex].index==1) {
document.myform.elements['myTextBox'].disabled=true;
document.myform.elements['myTextBox'].style.backgroundColor = '#CCCCCC';
}

if(document.myform.myDropDown.options[document.myform.myDropDown.selectedIndex].index==2) {
document.myform.elements['myTextBoxTwo'].disabled=true;
document.myform.elements['myTextBoxTwo'].style.backgroundColor = 'yellow';
}
if(document.myform.myDropDown.options[document.myform.myDropDown.selectedIndex].index==3{
document.myform.elements['myTextBox'].disabled=false;
document.myform.elements['myTextBox'].style.backgroundColor = 'blue';
document.myform.elements['myTextBoxTwo'].disabled=false;
}

}


[J]ona

[Jason64]

IT WORKED!
Thanks Jona, for being so patient. I'm a relative newbie, although I know my DOM, Sometimes I need a little nudge in the right direction and sometimes it's more like a push.....THANKS ALOT! I'm gonna look like a genius over here!

:D
Jason64

[Jona]

It's all right. Really, I just wanted you to think rather than expect that I just solve the problem for you; and you did. :)

[Jason64]

Thanks again, Chief! I'd definitely rather learn it, than some one just telling me....:p

Jason64