PDA

Click to See Complete Forum and Search --> : display text boxes upon selecting on list menu

robee
10-14-2003, 02:04 AM
ey, can anybody help a newbie here???

hi! just wanna ask if there's a way i can display two textboxes or one depending om my slected value in my list menu ???? ...here's my menu:

<form name="form1" method="post" action="">
<select name="select" size="1">
<option value="Date">Dates</option>
<option value="Title">Title</option>
</select>


when i clicked on Date option i want to display these two texboxes...

From:
<input type="text" name="DateFrom">
To:
<input type="text" name="DateTo">

but when i click on Title option i want to display one text box

<input type="text" name="Title">

i just hope someone can lend me a hand on this! THANKSSS :D
pyro
10-14-2003, 07:45 AM
You can try something like this (which will continue to be functional for those who have JavaScript disabled):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.hidden {
display: block;
}
</style>
<script type="text/javascript">
document.styleSheets[0].cssRules[0].style.display = "none";
function setFields(obj) {
if (obj.options[obj.selectedIndex].value == "Date") {
document.getElementById("title").style.display='none';
document.getElementById("date").style.display='block';
}
else if (obj.options[obj.selectedIndex].value == "Title") {
document.getElementById("date").style.display='none';
document.getElementById("title").style.display='block';
}
else {
document.getElementById("date").style.display='none';
document.getElementById("title").style.display='none';
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<p><select name="select" size="1" onchange="setFields(this);">
<option>Please Choose</option>
<option value="Date">Dates</option>
<option value="Title">Title</option>
</select></p>
<p id="date" class="hidden">From: <input type="text" name="DateFrom"><br>
To: <input type="text" name="DateTo"></p>
<p id="title" class="hidden">Title: <input type="text" name="Title"></p>
</form>
</body>
</html>
robee
10-14-2003, 08:26 PM
hmm, this will work if i have two options only..but what if i add some option values...

select name="selectField" size="1" >
<option value="" selected>-- pick --</option>
<option value="Title" selected>Title</option>
<option value="SubjectHeadings">Subject</option>
<option value="ISSN">ISSN</option>
<option value="LCCN">LCCN</option>
<option value="CallNum">Call No#</option>
<option value="AcquisitionDate">Acquisition Date</option>
<option value="CirculationNum">Circulation No#</option>
<option value="Status">Status</option>
</select>

and only the AcquiistionDate value has to have two textboxes to be displayed while the rest of the values has to have one textbox to be displayed when selected....how should i do it???
robee
10-14-2003, 09:18 PM
and sir, when i run the code it gives me this error :

line 14:
error: 'document.styleSheets.0.cssRules.0' is null or not an object';
robee
10-14-2003, 09:30 PM
oh well i just fixed it sir...and i did a lil revision...:D

i hope it'll be helpful to others:


<style type="text/css">
.panel { display: none; width:200px; margin: 20px 0px; }


</style>
<script type="text/javascript">

function setFields(obj) {
<!--document.styleSheets[0].cssRules[0].style.display = "none"; --!>
if (obj.options[obj.selectedIndex].value == "Date") {
document.getElementById("title").style.display='none';
document.getElementById("date").style.display='block';
document.getElementById("date").style.visibility='visible';
}
else if (obj.options[obj.selectedIndex].value == "Title") {
document.getElementById("date").style.display='none';
document.getElementById("title").style.display='block';
}
else if (obj.options[obj.selectedIndex].value == "ISSN") {
document.getElementById("date").style.display='none';
document.getElementById("title").style.display='block';
}
else {
document.getElementById("date").style.display='none';
document.getElementById("title").style.display='none';
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<p><select name="select" size="1" onchange="setFields
(this);">

<option value="Date">Dates</option>
<option value="Title" selected>Title</option>
<option value="ISSN">ISSN</option>
</select></p>
<div id="date" class="panel" style="visibility:hidden">From:
<input type="text" name="DateFrom"><br>
To: <input type="text" name="DateTo"></div>
<div id="title" class="panel">Title: <input type="text"
name="Title"></div>
</form>



thanks sir pyro ;) i've been searching the net big time and finally i found it here :D
pyro
10-14-2003, 09:34 PM
You are very welcome... I was happy to help... :)