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

How to hide second select tag in form until first selection is made

P: 8
You're welcome :) Post again if you have more questions.
OK. If you so kind, here is another one.
How to hide second select tag of the form on till first selection will be made?

----------------JS----------------------
Expand|Select|Wrap|Line Numbers
  1. <script src="request.js"></script>
  2. <script>
  3. function handleOnChange(dd1)
  4. {
  5.   var val = dd1.value;
  6.   var par = document.forms["frmSelect"];
  7.   var parelmts = par.elements;
  8.   var prezsel = parelmts["prez"];
  9.   var course = val;
  10.   if (course != "-Select a Course-")
  11.   {
  12.      Http.get({
  13.         url: "./" +  course + ".txt",
  14.         callback: fillPrez,
  15.         cache: Http.Cache.Get
  16.     }, [prezsel]);
  17.   }
  18. }
  19.  
  20. function fillPrez(xmlreply, prezelmt)
  21. {
  22.   if (xmlreply.status == Http.Status.OK)
  23.   {
  24.     var prezresponse = xmlreply.responseText;
  25.     var prezar = prezresponse.split("|");
  26.     prezelmt.length = 1;
  27.     prezelmt.length = prezar.length;
  28.     for (o=1; o < prezar.length; o++)
  29.     {
  30.       prezelmt[o].text = prezar[o];
  31.     }
  32.   }
  33.   else
  34.   {
  35.     alert("Cannot handle the AJAX call.");
  36.   }
  37. }
  38. </script>
  39.  
------------HTML-------------

[HTML]<FORM name="frmSelect">
<p>

<select name="course" onChange.value="handleOnChange(this);">
<option value='0'>-Select a Course-</option>
<option value='1'>Course Name 1</option>
<option value='2'>Course Name 2</option>
<option value='3'>Course Name 3</option>
</select>

<!-- HOW TO HIDE THIS PART ON TILL FIRST SELECTION WILL BE MADE -->
<select name="prez">
<option>-Choose date and location-</option>
</select>

</FORM>
[/HTML]

Is it true that you did 10,380 Posts or it is just a joke?
Aug 6 '08 #1

✓ answered by acoder

All right here is all my code. Maybe I just doing something wrong, but this function working exactly same way and not hiding second select tag.
You'll want your select element hidden initially to be shown later:[HTML]<!--This is second tag Select tag which is I want to be hidden untill first tag selection will be made -->
<select name="prez" style="display:none">
<option>-Choose date and location-</option>
</select>[/HTML]When the selection is made in the first element, then display the second one using, e.g.
Expand|Select|Wrap|Line Numbers
  1. document.forms["frmSelect"].prez.style.display = "block";

Share this Question
Share on Google+
10 Replies


samikhan83
P: 33
u have to use CSS visibility:hidden; property.....first then when ur selecting from first select box on onchange event u have to change CSS visibility property to visibility:visible; with the help of javascript... for that u have to write a javascript function.
sample code is here.

Expand|Select|Wrap|Line Numbers
  1.  
  2. function hidediv(id) {
  3. if (document.getElementById) { // DOM3 = IE5, NS6
  4. document.getElementById(id).style.visibility = 'hidden';
  5. }
  6. else {
  7. if (document.layers) { // Netscape 4
  8. document.hideShow.visibility = 'hidden';
  9. }
  10. else { // IE 4
  11. document.all.hideShow.style.visibility = 'hidden';
  12. }
  13. }
  14. }
  15.  
  16. function showdiv(id) {
  17. if (document.getElementById) { // DOM3 = IE5, NS6
  18. document.getElementById(id).style.visibility = 'visible';
  19. }
  20. else {
  21. if (document.layers) { // Netscape 4
  22. document.hideShow.visibility = 'visible';
  23. }
  24. else { // IE 4
  25. document.all.hideShow.style.visibility = 'visible';
  26. }
  27. }
  28.  
  29.  
  30.  
Aug 7 '08 #2

P: 8
Thanks samikhan83. I will play with it. And your were right about "onchange.value" it has to be only "onchange"
Aug 7 '08 #3

acoder
Expert Mod 15k+
P: 16,027
OK. If you so kind, here is another one.
I meant in another thread if it's a different question. I've split this question into its own thread.
Is it true that you did 10,380 Posts or it is just a joke?
It's true, no joke.

PS. please use code tags when posting code. See How to Ask a Question.
Aug 7 '08 #4

P: 8
It is looks to me very complicated. Is there way like use document.write(" with select tag") inside function selectCourse()?
Aug 7 '08 #5

rnd me
Expert 100+
P: 427
no, document.write will kill your page.

try to incorporate this:
Expand|Select|Wrap|Line Numbers
  1.  
  2. function handleOnChange(dd1)
  3. {
  4. var si = dd1.selectedIndex;
  5. var so = dd1.options;
  6. var prezsel = document.getElementsByName("prez")[0];
  7.  var course = so[si].value || so[si].text ;
  8.  
  9.   if (si != 0 )  {
  10.      Http.get({
  11.         url: "./" +  course + ".txt",
  12.         callback: fillPrez,
  13.         cache: Http.Cache.Get
  14.     }, [prezsel]);
  15.   }
  16. }
  17.  
  18.  
  19. //you also need to replace
  20.       prezelmt[o].text = prezar[o];
  21.  
  22. //with 
  23.       prezelmt[o].text = new Option (prezar[o]);
  24.  
  25.  
Aug 7 '08 #6

P: 8
All right here is all my code. Maybe I just doing something wrong, but this function working exactly same way and not hiding second select tag.
-------------------------
[PHP]<?
function selectCourse() {

$c=mysql_connect(HOST,USER,PASS);
mysql_select_db(DBNAME);
$res=mysql_query("select * from courses",$c);

$course_names[0]="-Select a Course-";
$i=1;
while($row=mysql_fetch_array($res)) {
$course_names[$i]=$row[course];
$i++;
}

$print_select_course="\n<select name=\"course\" onChange=\"handleOnChange(this);\"> \n";
foreach($course_names as $name=>$value) {
$print_select_course.="<option value='$name'>$value</option> \n";
}
$print_select_course.="<option>France</option> \n";
$print_select_course .= "\n</select> \n";

return $print_select_course;

}

function retrieveCourse() {

$c=mysql_connect(HOST,USER,PASS);
mysql_select_db(DBNAME);
$res=mysql_query("select course from courses",$c);

$course_names[0]="-Select a Course-";
while($row=mysql_fetch_array($res)) {
$course_names[] = '|' .$row[course];
$i++;
}
}
?>
[/PHP]
[HTML]<html>
<head>
<script src="request.js"></script>
<script>

function handleOnChange(dd1)
{
var si = dd1.selectedIndex;
var so = dd1.options;
var prezsel = document.getElementsByName("prez")[0];
var course = so[si].value || so[si].text ;
if (si != 0 ) {
Http.get({
url: "./" + course + ".txt",
callback: fillPrez,
cache: Http.Cache.Get
}, [prezsel]);
}
}

function fillPrez(xmlreply, prezelmt)
{
if (xmlreply.status == Http.Status.OK)
{
var prezresponse = xmlreply.responseText;
var prezar = prezresponse.split("|");
prezelmt.length = 1;
prezelmt.length = prezar.length;
for (o=1; o < prezar.length; o++)
{
prezelmt[o].text = prezar[o];
}
}
else
{
alert("Cannot handle the AJAX call.");
}
}
</script>

</head>
<body>

<form name="frmSelect">

<!--Thist php function prints first Select tag -->
<? print $course_names=selectCourse(); ?>

<!--This is second tag Select tag which is I want to be hidden untill first tag selection will be made -->
<select name="prez">
<option>-Choose date and location-</option>
</select>

</form>
</body>
</html>[/HTML]
Aug 7 '08 #7

acoder
Expert Mod 15k+
P: 16,027
cepera, please enclose your posted code in [code] tags (See How to Ask a Question).

This makes it easier for our Experts to read and understand it. Failing to do so creates extra work for the moderators, thus wasting resources, otherwise available to answer the members' questions.

Please use [code] tags in future.

MODERATOR
Aug 8 '08 #8

acoder
Expert Mod 15k+
P: 16,027
All right here is all my code. Maybe I just doing something wrong, but this function working exactly same way and not hiding second select tag.
You'll want your select element hidden initially to be shown later:[HTML]<!--This is second tag Select tag which is I want to be hidden untill first tag selection will be made -->
<select name="prez" style="display:none">
<option>-Choose date and location-</option>
</select>[/HTML]When the selection is made in the first element, then display the second one using, e.g.
Expand|Select|Wrap|Line Numbers
  1. document.forms["frmSelect"].prez.style.display = "block";
Aug 8 '08 #9

P: 8
You'll want your select element hidden initially to be shown later:[HTML]<!--This is second tag Select tag which is I want to be hidden untill first tag selection will be made -->
<select name="prez" style="display:none">
<option>-Choose date and location-</option>
</select>[/HTML]When the selection is made in the first element, then display the second one using, e.g.
Expand|Select|Wrap|Line Numbers
  1. document.forms["frmSelect"].prez.style.display = "block";
!!!WOW ACODER, YOU ROCK!!!
I new it is suppose to be very simple.
Thank you very much.

P.S. I am so sorry about those code tags and all other mess that I did, won't happen again, I promise.
Aug 8 '08 #10

acoder
Expert Mod 15k+
P: 16,027
No problem. Pleased to see that you've got it working.
Aug 8 '08 #11

Post your reply

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