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

[cepera]

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----------------------

<script src="request.js"></script>
<script>
function handleOnChange(dd1)
{
  var val = dd1.value;
  var par = document.forms["frmSelect"];
  var parelmts = par.elements;
  var prezsel = parelmts["prez"];
  var course = val;
  if (course != "-Select a Course-")
  {
 	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>

------------HTML-------------

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

<select name="course" onChange.value= "handleOnChange (this);">
<option value='0'>-Select a Course-</option>
<option value='1'>Cours e Name 1</option>
<option value='2'>Cours e Name 2</option>
<option value='3'>Cours e 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?

[samikhan83]

u have to use CSS visibility:hidd en; property.....fi rst then when ur selecting from first select box on onchange event u have to change CSS visibility property to visibility:visi ble; with the help of javascript... for that u have to write a javascript function.
sample code is here.

[CODE=javascript]

function hidediv(id) {
if (document.getEl ementById) { // DOM3 = IE5, NS6
document.getEle mentById(id).st yle.visibility = 'hidden';
}
else {
if (document.layer s) { // Netscape 4
document.hideSh ow.visibility = 'hidden';
}
else { // IE 4
document.all.hi deShow.style.vi sibility = 'hidden';
}
}
}

function showdiv(id) {
if (document.getEl ementById) { // DOM3 = IE5, NS6
document.getEle mentById(id).st yle.visibility = 'visible';
}
else {
if (document.layer s) { // Netscape 4
document.hideSh ow.visibility = 'visible';
}
else { // IE 4
document.all.hi deShow.style.vi sibility = 'visible';
}
}
}


[/CODE]

[cepera]

Thanks samikhan83. I will play with it. And your were right about "onchange.value " it has to be only "onchange"

[acoder]

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.

[cepera]

It is looks to me very complicated. Is there way like use document.write( " with select tag") inside function selectCourse()?

[rnd me]

no, document.write will kill your page.

try to incorporate this:

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]);
  }
}


//you also need to replace
      prezelmt[o].text = prezar[o];

//with 
      prezelmt[o].text = new Option (prezar[o]);

[cepera]

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_connec t(HOST,USER,PAS S);
mysql_select_db (DBNAME);
$res=mysql_quer y("select * from courses",$c);

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

$print_select_c ourse="\n<selec t name=\"course\" onChange=\"hand leOnChange(this );\"> \n";
foreach($course _names as $name=>$value) {
$print_select_c ourse.="<option value='$name'>$ value</option> \n";
}
$print_select_c ourse.="<option >France</option> \n";
$print_select_c ourse .= "\n</select> \n";

return $print_select_c ourse;

}

function retrieveCourse( ) {

$c=mysql_connec t(HOST,USER,PAS S);
mysql_select_db (DBNAME);
$res=mysql_quer y("select course from courses",$c);

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

function handleOnChange( dd1)
{
var si = dd1.selectedInd ex;
var so = dd1.options;
var prezsel = document.getEle mentsByName("pr ez")[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(xmlrep ly, prezelmt)
{
if (xmlreply.statu s == Http.Status.OK)
{
var prezresponse = xmlreply.respon seText;
var prezar = prezresponse.sp lit("|");
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=s electCourse(); ?>

<!--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]

[acoder]

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

[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.
[code=javascript]document.forms["frmSelect"].prez.style.dis play = "block";[/code]

[cepera]

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.
[code=javascript]document.forms["frmSelect"].prez.style.dis play = "block";[/code]

!!!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.

[acoder]

No problem. Pleased to see that you've got it working.