/    Sign up×
Community /Pin to ProfileBookmark

Simple task – Drop Down List

Copy linkTweet thisAlerts:
Mar 22.2007

Hello,

I am having the darndest time finding an easy solution to the following problem:

I need a form to have a drop down list with 3 options, we will call them Options A, B and C.

If Option A is selected, I need the page to give the user a text field called X.
If Option B is selected, I need the page to give the user a text field called Y.
If Option C is selected, I need the page to give the user a text field called Z.

I think javascript is the only/best way to do this, but can’t get any code I’ve written to work.

Any help is appreciated.

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@LeeUMar 22.2007 — You should be able to adapt something like this
Copy linkTweet thisAlerts:
@rdlandoauthorMar 22.2007 — I checked out the link you recommended...

...Unfortunately, I didn't think it would be that involved...Looks like I've got a lot of work to do on what I thought would be a simple implementation... [goes to make a pot of coffee]

Any other {simple} ideas?

Thanks!
Copy linkTweet thisAlerts:
@Wisest_GuyMar 22.2007 — Do you want three different text fields or do you want to modify the properties of a single text field?
Copy linkTweet thisAlerts:
@rdlandoauthorMar 22.2007 — Three Different ones...

eg.

register a product

drop down list options:

-[select type]

-car

-boat

-plane

if user selects car show user a text field to enter VIN#

if user selects boat show user a text field to enter boat reg number

if user selects plane, show user a a text field to enter tail number AND another text field to enter model number.(basically the last option needs to have two text fields.)

if user doesn't select a type, don't show any text fields.

Thanks!
Copy linkTweet thisAlerts:
@rdlandoauthorMar 26.2007 — So I take it nobody has any suggestions?
Copy linkTweet thisAlerts:
@JMRKERMar 26.2007 — How about something {simple enough?} like this?:
[code=php]
<html>
<head>
<title>3 Selections</title>
<script type="text/javascript">
function ShowReg(op) {
// alert('Option: '+op);
document.getElementById('Car').style.display='none';
document.getElementById('Boat').style.display='none';
document.getElementById('Plane').style.display='none';
if (op == 1) { document.getElementById('Car').style.display="block"; }
if (op == 2) { document.getElementById('Boat').style.display="block"; }
if (op == 3) { document.getElementById('Plane').style.display="block"; }
}
</script>
</head>
<body>
<h1> 3 Selections</h1>
<select id="choice" onChange="ShowReg(this.selectedIndex)">
<option value='0'>Select registration
<option value="1">Car
<option value="2">Boat
<option value="3">Plane
</select>
<br />
<div id="Car" style="display:none">
VIN # <input type="text" id="VIN" value="">
</div>
<div id="Boat" style="display:none">
Registration # <input type="text" id="Breg" value="">
</div>
<div id="Plane" style="display:none">
Tail # <input type="text" id="Ptail" value="">
Model <input type="text" id="Pmodel" value="">
</div>
</body>
</html>
[/code]
Could use style of 'visibility=visible|hidden' instead.
Copy linkTweet thisAlerts:
@rdlandoauthorMar 27.2007 — Couldn't have asked for anything better, Thanks a ton for your time and effort!

Robert
Copy linkTweet thisAlerts:
@LeeUMar 28.2007 — JMRKER,

Looks great! Mind if I post it over on JavaScript Source? Proper credit will be given, of course. Just give me the name and link you want used.
Copy linkTweet thisAlerts:
@margeccMar 30.2007 — Happy happy, joy joy! I have been looking for this exactly!!

Thank you so much!

Colleen
Copy linkTweet thisAlerts:
@JMRKERMar 30.2007 — You're both welcome. Glad I could help.
×

Success!

Help @rdlando spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...