/    Sign up×
Community /Pin to ProfileBookmark

Forms & If statements?

not sure if this is the right forum, but im looking to create a dropdown that, when a specific option is chosen, a coinciding dropdown appears. here’s an example:

[CODE]<TABLE BORDER=0 class=”text” width=”100%”>
<tr>
<td ALIGN=RIGHT VALIGN=TOP width=”35%” class=”text”>Section:</td>

<td ALIGN=LEFT><SELECT name=”SECTION”>
<OPTION value=”” selected=”selected”>< Please Select ></OPTION>
<OPTION value=”Accounting”>Accounting</OPTION>
<OPTION value=”Marketing”>Marketing</OPTION>
</SELECT>
</td>
</tr>

<tr>
<td ALIGN=RIGHT VALIGN=TOP width=”35%” class=”text”>Name:</td>

<td ALIGN=LEFT>
<SELECT name=”NAME1″>
<OPTION value=”” selected=”selected”>< Please Select ></OPTION>
<OPTION value=”Pete”>Pete</OPTION>
<OPTION value=”Joe”>Joe</OPTION>
</SELECT>

<SELECT name=”NAME2″>
<OPTION value=”” selected=”selected”>< Please Select ></OPTION>
<OPTION value=”Rich”>Rich</OPTION>
<OPTION value=”Fred”>Fred</OPTION>
</SELECT>

</td>
</tr>
</table>[/CODE]

in the above example, if a user chooses “Accounting” from the SECTION field, then NAME1 dropdown box would be available. If they choose “Marketing” from the SECTION field, then NAME2 dropdown box would be available.

any help is greatly appreciated. thanks in advance.

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@KorDec 15.2005 — here u are:
[code=php]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function showS(s){
var sel = document.getElementById('names').getElementsByTagName('select');
for(var i=0;i<sel.length;i++){
sel[i].style.display='none';
}
if(s>0){sel[s-1].style.display='block'}
}
</script>
</head>
<body>
<table border="0" class="text" width="100%">
<tr>
<td align="right" valign="top" width="35%" class="text">Section:</td>
<td align="left">
<select name="SECTION" onchange="showS(this.selectedIndex)">
<option value="" selected="selected">< Please Select ></option>
<option value="Accounting">Accounting</option>
<option value="Marketing">Marketing</option>
</SELECT>
</td>
</tr>
<tr>
<td align="right" valign="top" width="35%" class="text">Name:</td>
<td align="left" id="names">
<select name="NAME1" style="display:none">
<option value="" selected="selected">< Please Select ></option>
<option value="Pete">Pete</option>
<option value="Joe">Joe</option>
</select>
<select name="NAME2" style="display:none">
<option value="" selected="selected">< Please Select ></option>
<option value="Rich">Rich</option>
<option value="Fred">Fred</option>
</select>
</td>
</tr>
</table>
</body>
</html>
[/code]


make up your mind when coding HTML, use either uppercase or lowercase for elements/attributtes. Lowercase coding is better, as it is common with the "new commer" XHTML.
Copy linkTweet thisAlerts:
@jjr0319authorDec 15.2005 — i usually use lowercase, i just happened to copy the form from another web designer at my work who is quite messy with their code.

works perfect! thanks for the help.
×

Success!

Help @jjr0319 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 6.17,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...