By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
428,997 Members | 1,270 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 428,997 IT Pros & Developers. It's quick & easy.

Need to hide a form field (test) based on a previous field (select)

P: 40
I have a form in which a select field lists 5 items pus the option of "Other." I want a text field to be hidden unless the select field value is "Other."

The form is HTML, but I am assuming that I need to accomplish this with Javascript. Sample HTML code follows for the select field and the following text field.

Expand|Select|Wrap|Line Numbers
  1. <td>Location:<br><select name="room_descr" size="1">
  2. <option value="">Select a Location</option>
  3. <option value="Patient Room">Patient Room</option>
  4. <option value="Therapy Gym">Therapy Gym</option>
  5. <option value="Cafeteria">Cafeteria</option>
  6. <option value="Hospital Grounds">Hospital Grounds</option>
  7. <option value="Hospital Contractor Site">Hospital Contractor Site</option>
  8. <option value="Other">Other</option>
  9. </select></td>
  10. <td>Other:<br><INPUT TYPE=TEXT NAME="oth_descr" SIZE=32 MAXLENGTH=25></td>
  11.  
I'm pretty new to HTML and to Javascript. I'd appreciate either an answer from this forum or some links to samples/reference books.

Thanks,

jej1216
May 24 '07 #1
Share this Question
Share on Google+
3 Replies


epots9
Expert 100+
P: 1,351
I have a form in which a select field lists 5 items pus the option of "Other." I want a text field to be hidden unless the select field value is "Other."

The form is HTML, but I am assuming that I need to accomplish this with Javascript. Sample HTML code follows for the select field and the following text field.

Expand|Select|Wrap|Line Numbers
  1. <td>Location:<br><select name="room_descr" size="1">
  2. <option value="">Select a Location</option>
  3. <option value="Patient Room">Patient Room</option>
  4. <option value="Therapy Gym">Therapy Gym</option>
  5. <option value="Cafeteria">Cafeteria</option>
  6. <option value="Hospital Grounds">Hospital Grounds</option>
  7. <option value="Hospital Contractor Site">Hospital Contractor Site</option>
  8. <option value="Other">Other</option>
  9. </select></td>
  10. <td>Other:<br><INPUT TYPE=TEXT NAME="oth_descr" SIZE=32 MAXLENGTH=25></td>
  11.  
I'm pretty new to HTML and to Javascript. I'd appreciate either an answer from this forum or some links to samples/reference books.

Thanks,

jej1216
[html]
<td>Other:<br><INPUT TYPE=TEXT NAME="oth_descr" SIZE=32 MAXLENGTH=25 disabled>
[/html]
and in your javascript
Expand|Select|Wrap|Line Numbers
  1. document.oth_descr.disabled = false
  2.  
if its in a form then
Expand|Select|Wrap|Line Numbers
  1. document.myForm.oth_descr.disabled = false
  2.  
thats should do the trick
May 24 '07 #2

P: 40
[html]
<td>Other:<br><INPUT TYPE=TEXT NAME="oth_descr" SIZE=32 MAXLENGTH=25 disabled>
[/html]
and in your javascript
Expand|Select|Wrap|Line Numbers
  1. document.oth_descr.disabled = false
  2.  
if its in a form then
Expand|Select|Wrap|Line Numbers
  1. document.myForm.oth_descr.disabled = false
  2.  
thats should do the trick
Thanks, epots9 - I understand where you set the text field to disabled and then override that with Javascript. Where do I put the Javascript? It needs to be following the "Other" option in the previous field, right?

I tried this but got errors:
Expand|Select|Wrap|Line Numbers
  1. <td>Location:<br><select name="room_descr" size="1">
  2. <option value="">Select a Location</option>
  3. <option value="Patient Room">Patient Room</option>
  4. <option value="Therapy Gym">Therapy Gym</option>
  5. <option value="Cafeteria">Cafeteria</option>
  6. <option value="Hospital Grounds">Hospital Grounds</option>
  7. <option value="Hospital Contractor Site">Hospital Contractor Site</option>
  8. <option value="Other">Other (Describe)
  9. <script language="JavaScript">
  10.     document.irform.oth_descr.disabled = false;
  11. </script></option>
  12. </select></td>
  13. <td>Other:<br><INPUT TYPE=TEXT NAME="oth_descr" SIZE=32 MAXLENGTH=25 disabled></td>
  14.  
The form name is irform.

Thanks,
jej1216
May 24 '07 #3

epots9
Expert 100+
P: 1,351
put the javascript in the header

<script type="text/javascript">
function whatever()
{
//if option other is selected, enable textbox code
}
</script>

in the <select> tag add the attribute: [html]onchange="whatever();"[/html]
May 24 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.