Show and hide drop down boxes with a click button

alanl1 · June 4, 2013, 2:40am

Hi All

I have a dynamic drop down box that increments by 1 for its unique id. what I want to do is show it if the user clicks the “one to many” click box and hide it if the user de-selects the “one to many” click box.

It is initially hidden by default.

here is some of the code, the alert boxes fires ok but the rest does not for some reason

Please note I have tried both getElementByID and getElementByName but no luck with either…

<select name=“<?php echo “secondDD” .$c ?>” style=“display:none” onchange=“fillSelect(this,categories[this.value],‘<?php echo “secondDD” .$counter1++ ?>’)”>

function show_hide(){
	 var cbox = document.getElementById('cbox');
			
	if (cbox.checked){
		 alert("checkbox has been selected") ;
		document.getElementById('secondDD1').style.display = 'block';
		document.getElementById('secondDD1').disabled = false;
		document.getElementsByName('secondDD1').style.display = 'block';
		document.getElementsByName('secondDD1').disabled = false;
		}
		else
		{
		  alert("checkbox has been de-selected") ;
		 document.getElementById('secondDD1').disabled = true;
		 document.getElementById('secondDD1').style.display = 'none';
		 document.getElementsByName('secondDD1').disabled = true;
		 document.getElementsByName('secondDD1').style.display = 'none';

	 	}
}

Logic_Ali · June 5, 2013, 6:43pm

getElementById expects an ID,
getElementsNyName returns a collection (treated as an array) not one element.

<input type='checkbox' id='cbox'>
<select id="secondDD1" style="display:none" onchange="fillSelect(this,categories[this.value],'<?php echo "secondDD" .$counter1++ ?>')"></select>

<script>

document.getElementById( 'cbox' ).onclick = function(){ show_hide( this.checked ); }

function show_hide( isChecked )
{
  document.getElementById('secondDD1').style.display = ( isChecked ? 'block' : 'none' );
  document.getElementById('secondDD1').disabled = !isChecked;
}

</script>

alanl1 · June 5, 2013, 9:55pm

Hi Ali

I have implemented that and it still does not work, I have added in an alert box to check if function is working and that is firing ok

any ideas?

thanks

Logic_Ali:

getElementById expects an ID,
getElementsNyName returns a collection (treated as an array) not one element.

<input type='checkbox' id='cbox'>
<select id="secondDD1" style="display:none" onchange="fillSelect(this,categories[this.value],'<?php echo "secondDD" .$counter1++ ?>')"></select>

<script>

document.getElementById( 'cbox' ).onclick = function(){ show_hide( this.checked ); }

function show_hide( isChecked )
{
  document.getElementById('secondDD1').style.display = ( isChecked ? 'block' : 'none' );
  document.getElementById('secondDD1').disabled = !isChecked;
} 

</script>

Logic_Ali · June 6, 2013, 12:54am

Try using the error console. Full-page example.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>TEST</title>
</head>
<body>

<input type='checkbox' id='cbox'>
<select id="secondDD1" style="display:none" onchange="fillSelect(this,categories[this.value],'')"></select>

<script>

document.getElementById( 'cbox' ).onclick = function(){ show_hide( this.checked ); }

function show_hide( isChecked )
{
  document.getElementById('secondDD1').style.display = ( isChecked ? 'block' : 'none' );
  document.getElementById('secondDD1').disabled = !isChecked;
}
</script>

</body>

</html>

alanl1 · June 6, 2013, 1:05am

Hi Alli whats the error console. I am not sure.

I have attached my full page code just incase it helps to find why it could not be firing.

The dropdown box increments by one when it is created but I dont think thats why its causing nothing to happen



<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>linefeeds1</title>
</head>
<body>

<script type="text/javascript">
var categories = [];

	categories["startList"] = ["DeviceID","Manufacturer","Product","Version","NULL","Ignore"]
	categories["Manufacturer"] = ["DeviceID","Product","Version","NULL","Ignore"];
	categories["DeviceID"] = ["Manufacturer","Product","Version","NULL","Ignore"];
	categories["Product"] = ["DeviceID","Manufacturer","Version","NULL","Ignore"];
	categories["Version"] = ["DeviceID","Manufacturer","Product","NULL","Ignore"];
	categories["NULL"] = ["DeviceID","Manufacturer","Product","Version","NULL","Ignore"];
	categories["Ignore"] = ["DeviceID","Manufacturer","Product","Version","NULL","Ignore"];
	
	categories["startList2"] = ["DeviceID","Manufacturer","Product","Version","NULL","Ignore"]
	categories["Manufacturer2"] = ["DeviceID","Product","Version","NULL","Ignore"];
	categories["DeviceID2"] = ["Manufacturer","Product","Version","NULL","Ignore"];
	categories["Product2"] = ["DeviceID","Manufacturer","Version","NULL","Ignore"];
	categories["Version2"] = ["DeviceID","Manufacturer","Product","NULL","Ignore"];
	categories["NULL2"] = ["DeviceID","Manufacturer","Product","Version","NULL","Ignore"];
	categories["Ignore2"] = ["DeviceID","Manufacturer","Product","Version","NULL","Ignore"];
	
	categories["startList3"] = ["DeviceID","Manufacturer","Product","Version","NULL","Ignore"]
	categories["Manufacturer3"] = ["DeviceID","Product","Version","NULL","Ignore"];
	categories["DeviceID3"] = ["Manufacturer","Product","Version","NULL","Ignore"];
	categories["Product3"] = ["DeviceID","Manufacturer","Version","NULL","Ignore"];
	categories["Version3"] = ["DeviceID","Manufacturer","Product","NULL","Ignore"];
	categories["NULL3"] = ["DeviceID","Manufacturer","Product","Version","NULL","Ignore"];
	categories["Ignore3"] = ["DeviceID","Manufacturer","Product","Version","NULL","Ignore"];

function show_hide( isChecked )
{
	alert("checkbox has been selected") ;
  document.getElementById('secondDD1').style.display = ( isChecked ? 'block' : 'none' );
  document.getElementById('secondDD1').disabled = !isChecked;
}

function fillSelect(sel,ary,nxt){
 if (ary&&sel.form){
  var frm=sel.form,nme=sel.name.replace(/\\d/g,""),i=Number(sel.name.replace(/\\D/g,""))+1,nxt=frm[nxt],z0=0;
  while (frm[nme+i]){
   frm[nme+i].length = 1;
   frm[nme+i].selectedIndex=0;
   i++;
  }
  for (;z0<ary.length;z0++){
   nxt.options[z0+1]=new Option(ary[z0],ary[z0]);
  }
  nxt.selectedIndex=0;
 }
}

function getValue(isValue) {
 alert(isValue);
}

function init() {
 fillSelect(document.forms[0]['dropdown0'],categories['startList'],'dropdown0')
  fillSelect(document.forms[0]['secondDD0'],categories['startList2'],'secondDD0')
   fillSelect(document.forms[0]['thirdDD0'],categories['startList3'],'thirdDD0')
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

function myfunction()
{
alert("Please ensure the file is in csv format");
}
</script>

<?php include("header.php"); ?>
<?php include("footer.php"); ?>
	<form method='POST' name="myform" action="test.php" ><?php
	
$newname = $_GET['newname'];  //The file that has been moved into the Uploads/ folder will need to be stripped here to retreive just the filename...
$filename = basename($newname,"/");  //basename function strips off filename based on first forward slash "/"

// Three counter variables necessary for looping purposes for dynmaic drop down box javascript client side functions
$counter = 1;
$counter1 = 1;
$counter2 = 1;

function ext($file) {
	return substr(strrchr($file,'.'),1);
}
if (isset($filename)) {
$cfile = $filename;
$cfile = ext($cfile);
if ($cfile == 'csv'){
//do nothing its all good..
}
else {
	
	?>
<script type="text/javascript">
    myfunction();
</script><?php
header("refresh:1; url=preupload.php");
}
}
    if (($handle = fopen($filename, "r")) !== FALSE)
	{
	$length = 1000;
	$delimiter = ",";   ?>
	<?php
	$rows = 0; 	// ADDED
	while ( ( $data = fgetcsv( $handle, $length, $delimiter ) ) !== FALSE )
	{
	if( $rows == 0 )// or rows = 3 using pipe command|| $rows == 3 ) // ADDED
	{
			$num = count($data);
			echo "<table width=100% border=0>";
			echo "<tr width=100% align=center><td colspan=4>&nbsp</td></tr>";
			echo "<tr width=100% align=center><td colspan=4 style=white-space:nowrap;width:100%;></td></tr>";
			echo "<tr width=100% align=center><td colspan=4>Here we need info to assist user</td></tr>";
				echo "<tr width=100%><td width=25%>&nbsp</td>
				<td width=20%>&nbsp</td>
				<td width=15%>&nbsp;</td>
				<td width=40%>&nbsp;</td></tr>";
				echo "<tr width=100%><td width=25% align=right>&nbsp</td>
				<td colspan=3>By selecting one to many selection box will allow to split and cleanse the desired column into a maximum of 3 from the dropdown boxes</td></tr>";             	echo "<tr width=100%><td width=25% align=right>&nbsp</td>
				<td colspan=3>By not selecting one to many will only allow for first set of dropdown boxes to cleanse data</td></tr>";
				echo "<tr width=100%><td width=25% align=right>&nbsp</td>
				<td colspan=3>&nbsp</td></tr>";
				echo "<tr width=100%><td width=25% align=right>&nbsp</td>
				<td width=20%>
				<input type=checkbox id=cbox name=cbox value=unselected onclick=show_hide(this.checked);>One to many</td>
				<td width=15%>&nbsp;</td>
				<td width=40%>&nbsp;</td></tr>";
				echo "<tr width=100%><td width=25%>&nbsp;</td>
				<td width=20%>&nbsp</td>
				<td width=15%>&nbsp;</td>
				<td width=40%>&nbsp;</td></tr>";
 echo "</table>";
			for ($c=0; $c < $num; $c++)
	 		{
			echo "<table width=100% border=0>";
				echo "<tr width=25% align=right><td>";
			 //Second array element populates the dropdown and calculates the number of columns from spreadsheet
			 for ($d=0; $d < $num; $d++)
	 		{ 	
					//echo "<option value='" .$data[$d]."'>" .$data[$d]."</option>";
			}
			echo "<input type='text' id='".$data[$c]."' value='".$data[$c]."' DISABLED='disabled' style='background-color:White; color:Black;'>";
			 echo "</td>";
			 		echo "<td width=20% align=left>";
			 		?> <---- Matches to -----> <select name="<?php echo "dropdown" .$c?>" onchange="fillSelect(this,categories[this.value],'<?php echo "dropdown" .$counter++ ?>')"><?php
						echo "<option selected>Please Choose</option>";
						echo "<option value='DeviceID'>DeviceID</option>";
						echo "<option value='Product'>Product</option>";
						echo "<option value='Manufacturer'>Manufacturer</option>";
						echo "<option value='Version'>Version</option>";
						echo "<option value='NULL'>NULL</option>";
						echo "<option value='Ignore'>Ignore</option>";
			 		?></select><?php
			 		echo "</td>";
			  echo "<td width=15% align=left>";
			  ?> <select name="<?php echo "secondDD" .$c  ?>" onchange="fillSelect(this,categories[this.value],'<?php echo "secondDD" .$counter1++ ?>')"><?php
						echo "<option selected>Please Choose</option>";
						echo "<option value='DeviceID2'>DeviceID</option>";
						echo "<option value='Product2'>Product</option>";
						echo "<option value='Manufacturer2'>Manufacturer</option>";
						echo "<option value='Version2'>Version</option>";
						echo "<option value='NULL2'>NULL</option>";
						echo "<option value='Ignore2'>Ignore</option>";
			 		?></select><?php
			 		echo "</td>";
					 echo "<td width=40% align=left>";
			  ?> <select name="<?php echo "thirdDD" .$c?>" onchange="fillSelect(this,categories[this.value],'<?php echo "thirdDD" .$counter2++ ?>')"><?php
						echo "<option selected>Please Choose</option>";
						echo "<option value='DeviceID3'>DeviceID</option>";
						echo "<option value='Product3'>Product</option>";
						echo "<option value='Manufacturer3'>Manufacturer</option>";
						echo "<option value='Version3'>Version</option>";
						echo "<option value='NULL3'>NULL</option>";
						echo "<option value='Ignore3'>Ignore</option>";
			 		?></select><?php
			 		echo "</td>";
			 echo "</tr>";
			 echo "</table>";	
	 		}                     	 		
	}
	$rows++; // ADDED
	}
	 fclose($handle);
}
?><br /><table width="100%" border="0">
  <tr>
    <td width=25% align=center>&nbsp;</td>
    <td width=25% align=center>&nbsp;</td>
    <td width=25% align=left><input name="Clean" align="center" type="submit" value="Cleanse"/></td>
    <td width=25% align=center>&nbsp;</td>
  </tr>
</table>
</form>
</body>
</html>

alanl1 · June 6, 2013, 1:08am

I am not sure what the error console is.

I have attached the full page code to see if can spot whats wrong.

hope i am posting correctly


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>linefeeds1</title>
</head>
<body>

<script type="text/javascript">
var categories = [];

	categories["startList"] = ["DeviceID","Manufacturer","Product","Version","NULL","Ignore"]
	categories["Manufacturer"] = ["DeviceID","Product","Version","NULL","Ignore"];
	categories["DeviceID"] = ["Manufacturer","Product","Version","NULL","Ignore"];
	categories["Product"] = ["DeviceID","Manufacturer","Version","NULL","Ignore"];
	categories["Version"] = ["DeviceID","Manufacturer","Product","NULL","Ignore"];
	categories["NULL"] = ["DeviceID","Manufacturer","Product","Version","NULL","Ignore"];
	categories["Ignore"] = ["DeviceID","Manufacturer","Product","Version","NULL","Ignore"];
	
	categories["startList2"] = ["DeviceID","Manufacturer","Product","Version","NULL","Ignore"]
	categories["Manufacturer2"] = ["DeviceID","Product","Version","NULL","Ignore"];
	categories["DeviceID2"] = ["Manufacturer","Product","Version","NULL","Ignore"];
	categories["Product2"] = ["DeviceID","Manufacturer","Version","NULL","Ignore"];
	categories["Version2"] = ["DeviceID","Manufacturer","Product","NULL","Ignore"];
	categories["NULL2"] = ["DeviceID","Manufacturer","Product","Version","NULL","Ignore"];
	categories["Ignore2"] = ["DeviceID","Manufacturer","Product","Version","NULL","Ignore"];
	
	categories["startList3"] = ["DeviceID","Manufacturer","Product","Version","NULL","Ignore"]
	categories["Manufacturer3"] = ["DeviceID","Product","Version","NULL","Ignore"];
	categories["DeviceID3"] = ["Manufacturer","Product","Version","NULL","Ignore"];
	categories["Product3"] = ["DeviceID","Manufacturer","Version","NULL","Ignore"];
	categories["Version3"] = ["DeviceID","Manufacturer","Product","NULL","Ignore"];
	categories["NULL3"] = ["DeviceID","Manufacturer","Product","Version","NULL","Ignore"];
	categories["Ignore3"] = ["DeviceID","Manufacturer","Product","Version","NULL","Ignore"];

function show_hide( isChecked )
{
	alert("checkbox has been selected") ;
  document.getElementById('secondDD1').style.display = ( isChecked ? 'block' : 'none' );
  document.getElementById('secondDD1').disabled = !isChecked;
} 

function fillSelect(sel,ary,nxt){
 if (ary&&sel.form){
  var frm=sel.form,nme=sel.name.replace(/\\d/g,""),i=Number(sel.name.replace(/\\D/g,""))+1,nxt=frm[nxt],z0=0;
  while (frm[nme+i]){
   frm[nme+i].length = 1;
   frm[nme+i].selectedIndex=0;
   i++;
  }
  for (;z0<ary.length;z0++){
   nxt.options[z0+1]=new Option(ary[z0],ary[z0]);
  }
  nxt.selectedIndex=0;
 }
}

function getValue(isValue) {
 alert(isValue);
}

function init() {
 fillSelect(document.forms[0]['dropdown0'],categories['startList'],'dropdown0') 
  fillSelect(document.forms[0]['secondDD0'],categories['startList2'],'secondDD0') 
   fillSelect(document.forms[0]['thirdDD0'],categories['startList3'],'thirdDD0') 
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

function myfunction()
{
alert("Please ensure the file is in csv format");
}
</script>
 
<?php include("header.php"); ?> 
<?php include("footer.php"); ?>
	<form method='POST' name="myform" action="test.php" ><?php
	
$newname = $_GET['newname'];  //The file that has been moved into the Uploads/ folder will need to be stripped here to retreive just the filename...
$filename = basename($newname,"/");  //basename function strips off filename based on first forward slash "/"

// Three counter variables necessary for looping purposes for dynmaic drop down box javascript client side functions
$counter = 1;
$counter1 = 1;
$counter2 = 1;

function ext($file) {
	return substr(strrchr($file,'.'),1);
}
if (isset($filename)) {
$cfile = $filename;
$cfile = ext($cfile);
if ($cfile == 'csv'){
//do nothing its all good..
}
else {
	
	?>
<script type="text/javascript">
    myfunction();
</script><?php
header("refresh:1; url=preupload.php"); 
}
} 
    if (($handle = fopen($filename, "r")) !== FALSE)     
	{         
	$length = 1000;         
	$delimiter = ",";   ?>    
	<?php
	$rows = 0; 	// ADDED         
	while ( ( $data = fgetcsv( $handle, $length, $delimiter ) ) !== FALSE )         
	{         
	if( $rows == 0 )// or rows = 3 using pipe command|| $rows == 3 ) // ADDED         
	{                 
			$num = count($data); 
			echo "<table width=100% border=0>";  
			echo "<tr width=100% align=center><td colspan=4>&nbsp</td></tr>";
			echo "<tr width=100% align=center><td colspan=4 style=white-space:nowrap;width:100%;></td></tr>";
			echo "<tr width=100% align=center><td colspan=4>Here we need info to assist user</td></tr>";   
				echo "<tr width=100%><td width=25%>&nbsp</td>
				<td width=20%>&nbsp</td>
				<td width=15%>&nbsp;</td>
				<td width=40%>&nbsp;</td></tr>"; 
				echo "<tr width=100%><td width=25% align=right>&nbsp</td>
				<td colspan=3>By selecting one to many selection box will allow to split and cleanse the desired column into a maximum of 3 from the dropdown boxes</td></tr>";             	echo "<tr width=100%><td width=25% align=right>&nbsp</td>
				<td colspan=3>By not selecting one to many will only allow for first set of dropdown boxes to cleanse data</td></tr>";
				echo "<tr width=100%><td width=25% align=right>&nbsp</td>
				<td colspan=3>&nbsp</td></tr>";
				echo "<tr width=100%><td width=25% align=right>&nbsp</td>
				<td width=20%>
				<input type=checkbox id=cbox name=cbox value=unselected onclick=show_hide(this.checked);>One to many</td>
				<td width=15%>&nbsp;</td>
				<td width=40%>&nbsp;</td></tr>"; 
				echo "<tr width=100%><td width=25%>&nbsp;</td>
				<td width=20%>&nbsp</td>
				<td width=15%>&nbsp;</td>
				<td width=40%>&nbsp;</td></tr>"; 
 echo "</table>";
			for ($c=0; $c < $num; $c++)                 
	 		{  
			echo "<table width=100% border=0>";
				echo "<tr width=25% align=right><td>";
			 //Second array element populates the dropdown and calculates the number of columns from spreadsheet
			 for ($d=0; $d < $num; $d++)                 
	 		{ 	
					//echo "<option value='" .$data[$d]."'>" .$data[$d]."</option>"; 
			}
			echo "<input type='text' id='".$data[$c]."' value='".$data[$c]."' DISABLED='disabled' style='background-color:White; color:Black;'>";
			 echo "</td>";
			 		echo "<td width=20% align=left>";
			 		?> <---- Matches to -----> <select name="<?php echo "dropdown" .$c?>" onchange="fillSelect(this,categories[this.value],'<?php echo "dropdown" .$counter++ ?>')"><?php
						echo "<option selected>Please Choose</option>"; 
						echo "<option value='DeviceID'>DeviceID</option>";
						echo "<option value='Product'>Product</option>"; 
						echo "<option value='Manufacturer'>Manufacturer</option>"; 
						echo "<option value='Version'>Version</option>";
						echo "<option value='NULL'>NULL</option>";
						echo "<option value='Ignore'>Ignore</option>";    
			 		?></select><?php
			 		echo "</td>";
			  echo "<td width=15% align=left>";
			  ?> <select name="<?php echo "secondDD" .$c  ?>" onchange="fillSelect(this,categories[this.value],'<?php echo "secondDD" .$counter1++ ?>')"><?php
						echo "<option selected>Please Choose</option>"; 
						echo "<option value='DeviceID2'>DeviceID</option>";
						echo "<option value='Product2'>Product</option>"; 
						echo "<option value='Manufacturer2'>Manufacturer</option>"; 
						echo "<option value='Version2'>Version</option>";
						echo "<option value='NULL2'>NULL</option>";
						echo "<option value='Ignore2'>Ignore</option>";    
			 		?></select><?php
			 		echo "</td>";
					 echo "<td width=40% align=left>";
			  ?> <select name="<?php echo "thirdDD" .$c?>" onchange="fillSelect(this,categories[this.value],'<?php echo "thirdDD" .$counter2++ ?>')"><?php
						echo "<option selected>Please Choose</option>"; 
						echo "<option value='DeviceID3'>DeviceID</option>";
						echo "<option value='Product3'>Product</option>"; 
						echo "<option value='Manufacturer3'>Manufacturer</option>"; 
						echo "<option value='Version3'>Version</option>";
						echo "<option value='NULL3'>NULL</option>";
						echo "<option value='Ignore3'>Ignore</option>";    
			 		?></select><?php
			 		echo "</td>";
			 echo "</tr>";
			 echo "</table>";	
	 		}                     	 		         
	}        
	$rows++; // ADDED       
	}               
	 fclose($handle);     
} 
?><br /><table width="100%" border="0">
  <tr>
    <td width=25% align=center>&nbsp;</td>
    <td width=25% align=center>&nbsp;</td>
    <td width=25% align=left><input name="Clean" align="center" type="submit" value="Cleanse"/></td>
    <td width=25% align=center>&nbsp;</td>
  </tr>
</table>
</form>
</body>
</html>

Logic_Ali · June 6, 2013, 1:18am

Dependent on browser:

F12
Ctrl+Alt+J
Ctrl+Alt+C

Unless you’re posting a PHP problem, you are expected to post the resultant markup, not the PHP itself.

alanl1 · June 6, 2013, 1:21am

Hi again Ali

I am not sure as I am using a VM. I am just getting more confused now lol

I think it is the javascript that is not working

fazthegreat · June 10, 2013, 10:51pm

I believe Ali wants you the post the rendered markup, meaning view the page in a browser and then View Page Source, I’m sure you know how to do that and then post the markup here.

alanl1 · June 10, 2013, 11:01pm

Hi Ali

there you go

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>linefeeds1</title>

</head>
<body>
<script type="text/javascript">

var categories = [];

	categories["startList"] = ["DeviceID","Manufacturer","Product","Version","NULL","Ignore"]
	categories["Manufacturer"] = ["DeviceID","Product","Version","NULL","Ignore"];
	categories["DeviceID"] = ["Manufacturer","Product","Version","NULL","Ignore"];
	categories["Product"] = ["DeviceID","Manufacturer","Version","NULL","Ignore"];
	categories["Version"] = ["DeviceID","Manufacturer","Product","NULL","Ignore"];
	categories["NULL"] = ["DeviceID","Manufacturer","Product","Version","NULL","Ignore"];
	categories["Ignore"] = ["DeviceID","Manufacturer","Product","Version","NULL","Ignore"];
	
	categories["startList2"] = ["DeviceID","Manufacturer","Product","Version","NULL","Ignore"]
	categories["Manufacturer2"] = ["DeviceID","Product","Version","NULL","Ignore"];
	categories["DeviceID2"] = ["Manufacturer","Product","Version","NULL","Ignore"];
	categories["Product2"] = ["DeviceID","Manufacturer","Version","NULL","Ignore"];
	categories["Version2"] = ["DeviceID","Manufacturer","Product","NULL","Ignore"];
	categories["NULL2"] = ["DeviceID","Manufacturer","Product","Version","NULL","Ignore"];
	categories["Ignore2"] = ["DeviceID","Manufacturer","Product","Version","NULL","Ignore"];
	
	categories["startList3"] = ["DeviceID","Manufacturer","Product","Version","NULL","Ignore"]
	categories["Manufacturer3"] = ["DeviceID","Product","Version","NULL","Ignore"];
	categories["DeviceID3"] = ["Manufacturer","Product","Version","NULL","Ignore"];
	categories["Product3"] = ["DeviceID","Manufacturer","Version","NULL","Ignore"];
	categories["Version3"] = ["DeviceID","Manufacturer","Product","NULL","Ignore"];
	categories["NULL3"] = ["DeviceID","Manufacturer","Product","Version","NULL","Ignore"];
	categories["Ignore3"] = ["DeviceID","Manufacturer","Product","Version","NULL","Ignore"];

function show_hide( isChecked )
{
	alert(isChecked) ;
	document.getElementById('secondDD1').style.display = ( isChecked ? 'block' : 'none' );
	document.getElementById('secondDD1').style.display = 'none';
	document.getElementById('secondDD1').style.display = 'block';
  	document.getElementById('secondDD1').disabled = !isChecked;
	document.getElementById('thirdDD2').style = ( isChecked ? 'block' : 'none' );
	document.getElementById('thirdDD1').disabled = !isChecked;
} 

function fillSelect(sel,ary,nxt){
 if (ary&&sel.form){
  var frm=sel.form,nme=sel.name.replace(/\\d/g,""),i=Number(sel.name.replace(/\\D/g,""))+1,nxt=frm[nxt],z0=0;
  while (frm[nme+i]){
   frm[nme+i].length = 1;
   frm[nme+i].selectedIndex=0;
   i++;
  }
  for (;z0<ary.length;z0++){
   nxt.options[z0+1]=new Option(ary[z0],ary[z0]);
  }
  nxt.selectedIndex=0;
 }
}

function getValue(isValue) {
 alert(isValue);
}

function init() {
 fillSelect(document.forms[0]['dropdown0'],categories['startList'],'dropdown0') 
  fillSelect(document.forms[0]['secondDD0'],categories['startList2'],'secondDD0') 
   fillSelect(document.forms[0]['thirdDD0'],categories['startList3'],'thirdDD0') 
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

function myfunction()
{
alert("Please ensure the file is in csv format");
}
</script>
 
<style type="text/css">
   .specialImage{
  position:fixed;
  bottom:0;
  right:0;
  z-index:100; /* or higher/lower depending on other elements */
}
    </style>
   <table width="100%" border="0">
  <tr>
    <td width="33%">&nbsp;</td>
    <td width="33%"><img src="images/Data3.jpg" width="389"  height="100" alt="Data33" align="middle"></td>
    <td width="33%">&nbsp;</td>
  </tr>
</table> 
<style type="text/css">
   .specialImage{
  position:fixed;
  bottom:0;
  right:0;
  z-index:100; /* or higher/lower depending on other elements */
}
    </style>
<img src="images/MCP.jpg" class="specialImage" width="120" height="90" alt="Microsoft Certified Partner">
	<form method='POST' name="myform" action="test.php" >    
	<table width=100% border=0><tr width=100% align=center><td colspan=4>&nbsp</td></tr><tr width=100% align=center><td colspan=4 style=white-space:nowrap;width:100%;></td></tr><tr width=100% align=center><td colspan=4>Here we need info to assist user</td></tr><tr width=100%><td width=25%>&nbsp</td>
				<td width=20%>&nbsp</td>
				<td width=15%>&nbsp;</td>
				<td width=40%>&nbsp;</td></tr><tr width=100%><td width=25% align=right>&nbsp</td>
				<td colspan=3>By selecting one to many selection box will allow to split and cleanse the desired column into a maximum of 3 from the dropdown boxes</td></tr><tr width=100%><td width=25% align=right>&nbsp</td>
				<td colspan=3>By not selecting one to many will only allow for first set of dropdown boxes to cleanse data</td></tr><tr width=100%><td width=25% align=right>&nbsp</td>
				<td colspan=3>&nbsp</td></tr><tr width=100%><td width=25% align=right>&nbsp</td>
				<td width=20%>
				<input type=checkbox id=cbox name=cbox value=unselected onclick=show_hide(this.checked);>One to many</td>
				<td width=15%>&nbsp;</td>
				<td width=40%>&nbsp;</td></tr><tr width=100%><td width=25%>&nbsp;</td>
				<td width=20%>&nbsp</td>
				<td width=15%>&nbsp;</td>
				<td width=40%>&nbsp;</td></tr></table><table width=100% border=0><tr width=25% align=right><td><input type='text' id='Software Man' value='Software Man' DISABLED='disabled' style='background-color:White; color:Black;'></td><td width=20% align=left> <---- Matches to -----> <select name="dropdown0" onchange="fillSelect(this,categories[this.value],'dropdown1')"><option selected>Please Choose</option><option value='DeviceID'>DeviceID</option><option value='Product'>Product</option><option value='Manufacturer'>Manufacturer</option><option value='Version'>Version</option><option value='NULL'>NULL</option><option value='Ignore'>Ignore</option></select></td><td width=15% align=left> <select name="secondDD0" onchange="fillSelect(this,categories[this.value],'secondDD1')"><option selected>Please Choose</option><option value='DeviceID2'>DeviceID</option><option value='Product2'>Product</option><option value='Manufacturer2'>Manufacturer</option><option value='Version2'>Version</option><option value='NULL2'>NULL</option><option value='Ignore2'>Ignore</option></select></td><td width=40% align=left> <select name="thirdDD0" onchange="fillSelect(this,categories[this.value],'thirdDD1')"><option selected>Please Choose</option><option value='DeviceID3'>DeviceID</option><option value='Product3'>Product</option><option value='Manufacturer3'>Manufacturer</option><option value='Version3'>Version</option><option value='NULL3'>NULL</option><option value='Ignore3'>Ignore</option></select></td></tr></table><table width=100% border=0><tr width=25% align=right><td><input type='text' id='Part Number' value='Part Number' DISABLED='disabled' style='background-color:White; color:Black;'></td><td width=20% align=left> <---- Matches to -----> <select name="dropdown1" onchange="fillSelect(this,categories[this.value],'dropdown2')"><option selected>Please Choose</option><option value='DeviceID'>DeviceID</option><option value='Product'>Product</option><option value='Manufacturer'>Manufacturer</option><option value='Version'>Version</option><option value='NULL'>NULL</option><option value='Ignore'>Ignore</option></select></td><td width=15% align=left> <select name="secondDD1" onchange="fillSelect(this,categories[this.value],'secondDD2')"><option selected>Please Choose</option><option value='DeviceID2'>DeviceID</option><option value='Product2'>Product</option><option value='Manufacturer2'>Manufacturer</option><option value='Version2'>Version</option><option value='NULL2'>NULL</option><option value='Ignore2'>Ignore</option></select></td><td width=40% align=left> <select name="thirdDD1" onchange="fillSelect(this,categories[this.value],'thirdDD2')"><option selected>Please Choose</option><option value='DeviceID3'>DeviceID</option><option value='Product3'>Product</option><option value='Manufacturer3'>Manufacturer</option><option value='Version3'>Version</option><option value='NULL3'>NULL</option><option value='Ignore3'>Ignore</option></select></td></tr></table><table width=100% border=0><tr width=25% align=right><td><input type='text' id='Product Name' value='Product Name' DISABLED='disabled' style='background-color:White; color:Black;'></td><td width=20% align=left> <---- Matches to -----> <select name="dropdown2" onchange="fillSelect(this,categories[this.value],'dropdown3')"><option selected>Please Choose</option><option value='DeviceID'>DeviceID</option><option value='Product'>Product</option><option value='Manufacturer'>Manufacturer</option><option value='Version'>Version</option><option value='NULL'>NULL</option><option value='Ignore'>Ignore</option></select></td><td width=15% align=left> <select name="secondDD2" onchange="fillSelect(this,categories[this.value],'secondDD3')"><option selected>Please Choose</option><option value='DeviceID2'>DeviceID</option><option value='Product2'>Product</option><option value='Manufacturer2'>Manufacturer</option><option value='Version2'>Version</option><option value='NULL2'>NULL</option><option value='Ignore2'>Ignore</option></select></td><td width=40% align=left> <select name="thirdDD2" onchange="fillSelect(this,categories[this.value],'thirdDD3')"><option selected>Please Choose</option><option value='DeviceID3'>DeviceID</option><option value='Product3'>Product</option><option value='Manufacturer3'>Manufacturer</option><option value='Version3'>Version</option><option value='NULL3'>NULL</option><option value='Ignore3'>Ignore</option></select></td></tr></table><table width=100% border=0><tr width=25% align=right><td><input type='text' id='Edition' value='Edition' DISABLED='disabled' style='background-color:White; color:Black;'></td><td width=20% align=left> <---- Matches to -----> <select name="dropdown3" onchange="fillSelect(this,categories[this.value],'dropdown4')"><option selected>Please Choose</option><option value='DeviceID'>DeviceID</option><option value='Product'>Product</option><option value='Manufacturer'>Manufacturer</option><option value='Version'>Version</option><option value='NULL'>NULL</option><option value='Ignore'>Ignore</option></select></td><td width=15% align=left> <select name="secondDD3" onchange="fillSelect(this,categories[this.value],'secondDD4')"><option selected>Please Choose</option><option value='DeviceID2'>DeviceID</option><option value='Product2'>Product</option><option value='Manufacturer2'>Manufacturer</option><option value='Version2'>Version</option><option value='NULL2'>NULL</option><option value='Ignore2'>Ignore</option></select></td><td width=40% align=left> <select name="thirdDD3" onchange="fillSelect(this,categories[this.value],'thirdDD4')"><option selected>Please Choose</option><option value='DeviceID3'>DeviceID</option><option value='Product3'>Product</option><option value='Manufacturer3'>Manufacturer</option><option value='Version3'>Version</option><option value='NULL3'>NULL</option><option value='Ignore3'>Ignore</option></select></td></tr></table><table width=100% border=0><tr width=25% align=right><td><input type='text' id='Version Number' value='Version Number' DISABLED='disabled' style='background-color:White; color:Black;'></td><td width=20% align=left> <---- Matches to -----> <select name="dropdown4" onchange="fillSelect(this,categories[this.value],'dropdown5')"><option selected>Please Choose</option><option value='DeviceID'>DeviceID</option><option value='Product'>Product</option><option value='Manufacturer'>Manufacturer</option><option value='Version'>Version</option><option value='NULL'>NULL</option><option value='Ignore'>Ignore</option></select></td><td width=15% align=left> <select name="secondDD4" onchange="fillSelect(this,categories[this.value],'secondDD5')"><option selected>Please Choose</option><option value='DeviceID2'>DeviceID</option><option value='Product2'>Product</option><option value='Manufacturer2'>Manufacturer</option><option value='Version2'>Version</option><option value='NULL2'>NULL</option><option value='Ignore2'>Ignore</option></select></td><td width=40% align=left> <select name="thirdDD4" onchange="fillSelect(this,categories[this.value],'thirdDD5')"><option selected>Please Choose</option><option value='DeviceID3'>DeviceID</option><option value='Product3'>Product</option><option value='Manufacturer3'>Manufacturer</option><option value='Version3'>Version</option><option value='NULL3'>NULL</option><option value='Ignore3'>Ignore</option></select></td></tr></table><table width=100% border=0><tr width=25% align=right><td><input type='text' id='Invoice Number' value='Invoice Number' DISABLED='disabled' style='background-color:White; color:Black;'></td><td width=20% align=left> <---- Matches to -----> <select name="dropdown5" onchange="fillSelect(this,categories[this.value],'dropdown6')"><option selected>Please Choose</option><option value='DeviceID'>DeviceID</option><option value='Product'>Product</option><option value='Manufacturer'>Manufacturer</option><option value='Version'>Version</option><option value='NULL'>NULL</option><option value='Ignore'>Ignore</option></select></td><td width=15% align=left> <select name="secondDD5" onchange="fillSelect(this,categories[this.value],'secondDD6')"><option selected>Please Choose</option><option value='DeviceID2'>DeviceID</option><option value='Product2'>Product</option><option value='Manufacturer2'>Manufacturer</option><option value='Version2'>Version</option><option value='NULL2'>NULL</option><option value='Ignore2'>Ignore</option></select></td><td width=40% align=left> <select name="thirdDD5" onchange="fillSelect(this,categories[this.value],'thirdDD6')"><option selected>Please Choose</option><option value='DeviceID3'>DeviceID</option><option value='Product3'>Product</option><option value='Manufacturer3'>Manufacturer</option><option value='Version3'>Version</option><option value='NULL3'>NULL</option><option value='Ignore3'>Ignore</option></select></td></tr></table><table width=100% border=0><tr width=25% align=right><td><input type='text' id='Supplier' value='Supplier' DISABLED='disabled' style='background-color:White; color:Black;'></td><td width=20% align=left> <---- Matches to -----> <select name="dropdown6" onchange="fillSelect(this,categories[this.value],'dropdown7')"><option selected>Please Choose</option><option value='DeviceID'>DeviceID</option><option value='Product'>Product</option><option value='Manufacturer'>Manufacturer</option><option value='Version'>Version</option><option value='NULL'>NULL</option><option value='Ignore'>Ignore</option></select></td><td width=15% align=left> <select name="secondDD6" onchange="fillSelect(this,categories[this.value],'secondDD7')"><option selected>Please Choose</option><option value='DeviceID2'>DeviceID</option><option value='Product2'>Product</option><option value='Manufacturer2'>Manufacturer</option><option value='Version2'>Version</option><option value='NULL2'>NULL</option><option value='Ignore2'>Ignore</option></select></td><td width=40% align=left> <select name="thirdDD6" onchange="fillSelect(this,categories[this.value],'thirdDD7')"><option selected>Please Choose</option><option value='DeviceID3'>DeviceID</option><option value='Product3'>Product</option><option value='Manufacturer3'>Manufacturer</option><option value='Version3'>Version</option><option value='NULL3'>NULL</option><option value='Ignore3'>Ignore</option></select></td></tr></table><table width=100% border=0><tr width=25% align=right><td><input type='text' id='Purchasing Officer' value='Purchasing Officer' DISABLED='disabled' style='background-color:White; color:Black;'></td><td width=20% align=left> <---- Matches to -----> <select name="dropdown7" onchange="fillSelect(this,categories[this.value],'dropdown8')"><option selected>Please Choose</option><option value='DeviceID'>DeviceID</option><option value='Product'>Product</option><option value='Manufacturer'>Manufacturer</option><option value='Version'>Version</option><option value='NULL'>NULL</option><option value='Ignore'>Ignore</option></select></td><td width=15% align=left> <select name="secondDD7" onchange="fillSelect(this,categories[this.value],'secondDD8')"><option selected>Please Choose</option><option value='DeviceID2'>DeviceID</option><option value='Product2'>Product</option><option value='Manufacturer2'>Manufacturer</option><option value='Version2'>Version</option><option value='NULL2'>NULL</option><option value='Ignore2'>Ignore</option></select></td><td width=40% align=left> <select name="thirdDD7" onchange="fillSelect(this,categories[this.value],'thirdDD8')"><option selected>Please Choose</option><option value='DeviceID3'>DeviceID</option><option value='Product3'>Product</option><option value='Manufacturer3'>Manufacturer</option><option value='Version3'>Version</option><option value='NULL3'>NULL</option><option value='Ignore3'>Ignore</option></select></td></tr></table><br /><table width="100%" border="0">
  <tr>
    <td width=25% align=center>&nbsp</td>
    <td width=25% align=center>&nbsp;</td>
    <td width=25% align=left><input name="Clean" align="center" type="submit" value="Cleanse"/></td>
    <td width=25% align=center>&nbsp;</td>
  </tr>
</table>
</form>
</body>
</html>

Logic_Ali · June 11, 2013, 10:05am

As its name suggests, document.getElementById expects to ba passed an ID.

alanl1 · June 11, 2013, 9:47pm

Where and how do i pass in an ID, I thought it was already doing that, I am new to javascript and php

Logic_Ali · June 11, 2013, 11:06pm

No you’re passing a name attribute. To each referenced element add a matching ID:

<select name=“secondDD1” id=“secondDD1” …

alanl1 · June 11, 2013, 11:47pm

thats great that works, thanks you have been a big help as I have had a week of trying to figure this out.

just one other question is that I want to make these appear and vanish for multiple boxes. Is there a way to loop through these as there could be 2 dropdowns or maybe even 50.

I have tried the for loop within the function but it does not seem to like it?

any ideas

function show_hide( isChecked )
{
alert(isChecked) ;

//Can i loop through the dropdowns rather than hardcode them all as the number is unknow per spreadsheet.
// This for loop does not work…
foreach ($_POST[‘secondDD’] as $boxIndex=>$boxValue)
{
alert(document.getElementById(‘secondDD[$boxIndex]’).value) ;
}

document.getElementById('secondDD[1]').style.display = ( isChecked ? 'block' : 'none' );
document.getElementById('secondDD[1]').disabled = !isChecked;

document.getElementById('secondDD[2]').style.display = ( isChecked ? 'block' : 'none' );
document.getElementById('secondDD[2]').disabled = !isChecked;

}

Logic_Ali · June 12, 2013, 1:03am

This function will do it but presumably those <select>s are initially to be hidden.
You can exclude elements from the operation by adding the word ‘nohide’ to their class.

function show_hide( isChecked )
{
  var allSelects = document.getElementsByTagName( 'select' ),
      box;
  
  for( var i = 0; ( box = allSelects[ i ] ); i++ )
    if( !/(^|\\s)nohide(\\s|$)/i.test( box.className ) )
      box.style.display = isChecked ? 'inline' : 'none';
}

alanl1 · June 12, 2013, 1:15am

Hi Ali

Again that is fantastic but I have columns like so

firstDD01 secondDD01 thirdDD01
firstDD01 secondDD02 thirdDD02
firstDD02 secondDD03 thirdDD02
and so on

I only want to hide the secondDD01,secondDD02 etc and thirdDD01,thirdDD02, thirdDD03 columns

but this is hiding them all. I still want to show the first columns

if you know what I mean, I hope i make sense