473,406 Members | 2,336 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,406 software developers and data experts.

Show/Hide text and form field based on drop down selection

Hi

I'm trying to show/hide a simple piece of text and a text field on a
form based on what choice is made from a drop down box.

<select name="dropdown" size="1">
<option selected value="">Please make a selection</option>
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
<option value="3">Choice 3</option>
<option value="4">Other</option>
</select>

i.e. if Choice 2 is selected I'd like to display a new <tr> with the
following:

<tr>
<td>New text field:</td>
<td><input name="newField" type="text size="20"></td>
</tr>

if any other choices are made, I don't want to display anything.
I've tried several onchange() functions but can't achieve what I'm
looking for.

Any help would be appreciated,
Steve
Jul 20 '05 #1
6 148503
Steve,
Did you ever get a response to your request? I need to do something similar. Please email me at ljhibbard@doit.nv.gov.
Thanks.
Linda
Aug 10 '05 #2
MrK
1
Try this script. It will hide/show table rows based on a selection. you can put whatever you want in the tbody areas.





<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Show/Hide</title>
<script type="text/javascript">
// <![CDATA[
function display(obj,id1,id2) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
}
// ]]>
</script>
</head>

<body>
<table width="340" cellspacing="0" cellpadding="2">
<thead>
<tr>
<td class="title">Type:</td>
<td class="field">
<select name="type" onchange="display(this,'text','image');">
<option>Please select:</option>
<option value="image">Image</option>
<option value="text">Texts</option>
<option value="invisible">Invisible</option>
</select>
</td>
</tr>
</thead>
<tfoot>
<tr>
<td class="align-center" colspan="2"><input type="submit" name="submit" value="Update" /> <input type="reset" value="Reset" /></td>
</tr>
</tfoot>
<tbody id="text" style="display: none;">
<tr>
<td class="title">Text Color:</td>
<td class="field"><input type="text" name="color" size="8" maxlength="7" /></td>
</tr>
</tbody>
<tbody id="image" style="display: none;">
<tr>
<td class="title">Image:</td>
<td class="field"><input type="file" name="image" size="10" /></td>
</tr>
<tr>
<td class="title">X Coordinates:</td>
<td class="field"><input type="text" name="x_coordinates" size="5" /></td>
</tr>
<tr>
<td class="title">Y Coordinates:</td>
<td class="field"><input type="text" name="y_coordinates" size="5" /></td>
</tr>
<tr>
<td class="title">Text Color:</td>
<td class="field"><input type="text" name="color" size="8" maxlength="7" /></td>
</tr>
</tbody>
<tbody>
<tr>
<td class="title">Display:</td>
<td class="field">
<select name="display">
<option value="visitors">Visitors</option>
<option value="hits">Hits</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Feb 16 '06 #3
Thanks for the JScript. It worked well for me
Mar 23 '06 #4
Allan
1
Thanks for the JScript. It worked well for me
Hello,

I'm having the same problem, I'm working with xsl, but it should be +/- the same.
The update and reset doesn't do anything, does it?
I mean, the whole example doesn't do anything but show the dropdown and the buttons, right?

And can you post your example too please?
Mar 29 '06 #5
nausa
1
This code would also work great for me except if I put it in a form tags

<form></form> in order to send it to an email box to get the field values the code stops working. Is there any way to get this code to work with adding the form tags in or is there another way to send the form to an email without having the form tags.

Thanks,
Amy
Apr 14 '06 #6
what if i want to show/hide a dropdown menu after choosing from the selection and replaces it by another dropdown menu?

For example:

Here's the first dropdown menu:
<select name="signalling">
<option value="fx">FX?</option>
<option value="pri">PRI</option>
</select>

after choosing FX? option, it will disappear and then replaces by another dropdown menu.

Here's the second dropdown menu that should appear:
<select name="fx">
<option value="fx0">FX0</option>
<option value="fxs">FXS</option>
</select>

And ofcourse, it should have a reset button to return to its original state which hides the second dropdown menu and be replaced by the first one.

Hope that you could help me on this.

Thanks a lot!
Jun 10 '06 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: InvisibleMan | last post by:
Hi, Thanks in advance... I want to test two form fields: ConversionValue (text field) convert (Select Dropdown: Index 0 = True - 1 = False) Essentially, If ConversionValue is Blank,...
2
by: Sybre | last post by:
I have a script which reads a file and generates a list for a drop-down selection box. However, I want to be able to change which option is selected when certain buttons are clicked - how can I do...
1
by: bvlmv | last post by:
Hello, relatively new to programming and just trying to create a simple asp page. I have the following drop down menu on a html page and when submitting i would like to call out on asp what someone...
6
by: bvlmv | last post by:
Hello, relatively new to programming and just trying to create a simple asp page. I have the following drop down menu on a html page and when submitting i would like to call out on asp what...
2
by: bbatson | last post by:
Hello, Does anyone have any advice as to how to limit a drop-down selection in a table? For example, suppose I have two tables - essentially a one-to-many relationship. One table is...
3
by: steveninfl | last post by:
Hello , I am using MS Access 2000. I have a Table called Transactions, I have created a form for this table, one of the fields on the form is a combo box with the row source type as value list. In...
6
by: Palehorse | last post by:
I'd like to apologize upfront for me saying "I'm not a programer", I'm sure you all hear this a hundred times a day. Unfortunately, in this case, it's true. I've been working on trying to figure out...
0
by: So Confused | last post by:
I have a drop down selection menu on an HTML form. I want to display 1 answer, for a few selection options.... and another answer for the rest of the options. Example code is below: How Much...
0
by: Alex Fung | last post by:
When I use GotFree Cards (http://www.got-free-ecards.com) to send free e-cards, I come across a problem when selecting the future date for sending the card. The webpage uses javascript and the...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.