I have a DDL with "other" as an option. If Other is selected the textbox appears. If someone tries to submit the form I want an error message to appear.

What am I doing wrong or is there another way to do this?


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<style type="text/css">
.hidden {
display: none;
}
</style>
<title>Untitled Page</title>
<script type="text/javascript">

function enableOther()
{
if (!document.getElementById) return;
var s = document.getElementById('reason1');
if (!s) return;
if (s.options[s.selectedIndex].value != 'Other: ') return;
var t = document.getElementById('reason1other');
if (!t) return;
t.disabled = false;
t.className = '';
}

function init()
{
if (!document.getElementById) return;
var s = document.getElementById('reason1');
if (!s) return;
s.onchange = enableOther;
var t = document.getElementById('reason1other');
if (!t) return;
t.disabled = true;
t.className = 'hidden';
}

window.onload = init;
</script>

</head>
<body>
<form id="form1" runat="server">
<div>
<form>
<select id="reason1" name="reason1">
<option value="P.T.">P.T.</option>
<option value="Break">Break</option>
<option value="IT">IT Issues</option>
<option value="Training">Training</option>
<option value="Briefing">Briefing</option>
<option value="Supervisor">Supervisor</option>
<option value="Other: ">Other</option>
</select>
<input type="text" id="reason1other" name="reason1other" Size=22 />
</form>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="enableOther();" />
</form>
</body>
</html>

Thanks!