Disabling textbox if particular menu option is selected

chrismassey · Jun 26, 2008

Hello,

I need to disable a textbox if a particular menu option has been selected. Basically, I have a form where the user has 2 choices... 1) Type the information into the textbox, OR, 2) Select the information from the drop down menu. If they have selected an option from the drop down menu then obviously I want to stop them from being able to then enter information into the textbox "twice" by disabling it. If the first option is selected then the textbox must remain enabled. My code below doesn't seem to work and I am unsure why. Any suggestions?

Code:

<html>

<head>
<title></title>
</head>

<body>

<form name="TitleForm">

<input type="text" name="Add_To_Title_Other">

<select name="Add_To_Title_Other_Menu">
<option value="0"> &gt;&gt;&gt; </option>
<option value="1" onClick="javascript:document.TitleForm.Add_To_Title_Other.disabled=true"> One </option>
<option value="2" onClick="javascript:document.TitleForm.Add_To_Title_Other.disabled=true"> Two </option>
<option value="3" onClick="javascript:document.TitleForm.Add_To_Title_Other.disabled=true"> Three </option>
</select>

</form>

</body>

</html>

Thanks Alot,

Chris

BabyJeffy · Jun 26, 2008

An an onchange event to the select element that does this (instead of using the onclick event on the individual option elements).

Code:

<select name="Add_To_Title_Other_Menu"[!] onchange="document.TitleForm.Add_To_Title_Other.disabled = this.selectedIndex > 0 ? true : false"[/!]>
<option value="0"> &gt;&gt;&gt; </option>
<option value="1" [s]onClick="javascript:document.TitleForm.Add_To_Title_Other.disabled=true"[/s]> One </option>
<option value="2" [s]onClick="javascript:document.TitleForm.Add_To_Title_Other.disabled=true"[/s]> Two </option>
<option value="3" [s]onClick="javascript:document.TitleForm.Add_To_Title_Other.disabled=true"[/s]> Three </option>
</select>

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

chrismassey · Jun 26, 2008

Thank you very much ONCE AGAIN BabyJeffy,

It did exactly what I wanted! I also improved my script so that it does the following:
1) Disable the textbox if a menu option other than the 1st option is selected.
2) Disable the menu if the textbox contains any text.

Now there is no way information from both the textbox and the menu can be processed by my PHP script...

Code:

<html>

<head>
<title></title>
<script language="javascript">
function checkempty(){
var textbox;
textbox = document.getElementById('Add_To_Title_Other');
if(textbox.value == ""){document.TitleForm.Add_To_Title_Other_Menu.disabled=false}
else{document.TitleForm.Add_To_Title_Other_Menu.disabled=true}
}
</script>
</head>

<body>

<form name="TitleForm">

<input type="text" name="Add_To_Title_Other" onkeyup="checkempty()">

<select name="Add_To_Title_Other_Menu" onchange="document.TitleForm.Add_To_Title_Other.disabled = this.selectedIndex > 0 ? true : false">
<option value="0"> &gt;&gt;&gt; </option>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> Three </option>
</select>

</form>

</body>

</html>

Thanks again,

Chris

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Disabling textbox if particular menu option is selected

chrismassey

Programmer

BabyJeffy

Programmer

chrismassey

Programmer

Similar threads

Part and Inventory Search

Sponsor