Member Avatar for cVz

Hi guys,

I am trying to hide 2 list boxes, then on selection changed show a new list box with JavaScript, i am very very new to web development in general, I am actually a software developer in the Pascal and C# language so this is all very new to me, please help with any ideas or code ?

This is what i have

<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 100%">
	
	<tr>
		<td align="center" valign="middle" style="background: url('Image2.jpg') no-repeat fixed 50% top; 						height: 113px; color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-style: normal; 							font-variant: normal; font-weight: bold; line-height: normal;" valign="top" class="style1">
		NCS Quote System</td>
	</tr>
	
	<tr >
		<td style="width: 100%" valign="top" align="center" >
		
		<select title="Select a section :">
		
		<?php
			//Selecting table Sections *****************************************************************
			 $Sections = mysql_query("SELECT * FROM sections", $connection);
	
			if (!$Sections)
				{
					die("Database query failed : " .mysql_error() );
				}
		
			while ($RowSections = mysql_fetch_array($Sections))
				{
					echo '<option value='.$RowSections['Description'].'>'.$RowSections['Description'].'</option>';
				}
				
				echo '</select>';
		?>
		
		</td>
		
	</tr>
		
	<tr>
		<td style="width: 100%" valign="top" align="center">
		<?php
		
		echo '<select>';
		
		//Selecting table Categories *********************************************************
		$Categories = mysql_query("SELECT * FROM categories, section_category_link 																			WHERE categories.id = section_category_link.CategoryId", $connection);
		
		if (!$Categories)
			{
				die("Database query failed : " .mysql_error() );
			}
		
		while ($RowCategories = mysql_fetch_array($Categories))
			{
				echo '<option value='.$RowCategories['Description'].'>'.$RowCategories['Description'].'</option>';
			}
			echo '</select>';
		?>
		
		
		
		</td>
	</tr>
		
	<tr>
		<td style="width: 20%" valign="top" align="center">
		<?php
		
		echo '<select>';
		
		//Selecting table Sub_Categories ******************************************************************
		$Sub_Categories = mysql_query("SELECT * FROM subcategories, category_subcategory_link																	WHERE subcategories.id = category_subcategory_link.CategoryId ", $connection);
	
		if (!$Sub_Categories)
			{
				die("Database query failed : " .mysql_error() );
			}
		
		while ($RowSubCategories = mysql_fetch_array($Sub_Categories))
		{
			echo '<option value='.$RowSubCategories['Description'].'>'.$RowSubCategories['Description'].'</option>';
		}
		echo '</select>';
		?>
		
		
		</td>
	</tr>

	<tr>
		<td style="width: 20%" valign="top" align="center">
		<?php
		
		//Selecting table Sub_Categories ********************************************************************
		$Items = mysql_query("SELECT * FROM items, subcategory_item_link																				WHERE items.Id = subcategory_item_link.ItemId", $connection);
	
		if (!$Items)
			{
				die("Database query failed : " .mysql_error() );
			}
		
		while ($RowItems = mysql_fetch_array($Items))
			{
				echo $RowItems["FullDescription"]. ", " .$RowItems["ShortDescription"] . ", " .$RowItems[""] . "<br />";
			}
		?>
		
		
		</td>
	</tr>
</table>

I am aware of the fact that there is no Java Script in there yet because i have no idea how to go about this ...

Any help would be appreciated

Yours sincerely

Paul

  • 3 Contributors
  • 2 Replies
  • 71 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by nikesh.yadav
Member Avatar for essential

Hope this example will help you on your way in learning javascript!
And Good day to you!

<html>
<head>
<title><!--Sample--></title>
<script type="text/javascript">
<!-- BEGIN HIDING

/* ADD
 OPTION TO YOUR SELECTION LIST */
function addOpt()
{ /* You can also use the
     addOption function 
     instead of this one!
     But since my browser
     doesnt support it!
     Then ill have to use the 
     createElement method
     to add option on the list!
  */
 
var select = document.getElementsByTagName('select')[0];
  var option = document.createElement('option');
  for ( var x = 0; x < form1.list.options.length; x++ ) 
{ option.text = 'Selection List ' + x; }
  select.appendChild(option);
}
 
<!-- SHOW AND HIDE YOUR COMBOboX! -->
function hideMe( thisItem )
{ 
div = document.getElementsByTagName('div');
div[thisItem].style.visibility = "hidden";
div['control'].innerText = 'Show Me!';
div['control'].onclick = function() { div['control'].innerText = "Hide Me!"; div['control'].onclick = "hideMe(\"sample\");"; div[thisItem].style.visibility = "visible"; }
}
// AND I'M DONE WITH HIDING -->
</script>
</head>
<body>
<div id="sample">
<form name="form1" action="#" onsubmit="return false;">
<select name="list" onchange="addOpt();">
<option>Hide Me!</option>
<option>Add</option>

</select>
</form>
</div> 
<div id="control" onclick="hideMe('sample');">Hide Me!</div>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.