SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    show and hide drop down boxes with a click button

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

    }
    }

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    getElementById expects an ID,
    getElementsNyName returns a collection (treated as an array) not one element.

    Code:
    <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>
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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




    Quote Originally Posted by Logic Ali View Post
    getElementById expects an ID,
    getElementsNyName returns a collection (treated as an array) not one element.

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

  4. #4
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try using the error console. Full-page example.

    Code:
    <!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>
    Tab-indentation is a crime against humanity.

  5. #5
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Code:
    <!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>

  6. #6
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    PHP Code:
    <!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 == )// 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>
    Last edited by ScallioXTX; Jun 6, 2013 at 03:16. Reason: wrapped code in [php][/php]

  7. #7
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by alanl1 View Post
    I am not sure what the error console is.
    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.
    Tab-indentation is a crime against humanity.

  8. #8
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  9. #9
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    FL
    Posts
    33
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Post Markup

    Quote Originally Posted by alanl1 View Post
    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
    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.

  10. #10
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ali


    there you go



    HTML Code:
    <!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>
    Last edited by cpradio; Jun 11, 2013 at 04:23. Reason: Added html tags

  11. #11
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As its name suggests, document.getElementById expects to ba passed an ID.
    Tab-indentation is a crime against humanity.

  12. #12
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where and how do i pass in an ID, I thought it was already doing that, I am new to javascript and php

  13. #13
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by alanl1 View Post
    Where and how do i pass in an ID, I thought it was already doing that, I am new to javascript and php
    No you're passing a name attribute. To each referenced element add a matching ID:

    <select name="secondDD1" id="secondDD1" ...
    Tab-indentation is a crime against humanity.

  14. #14
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;

    }

  15. #15
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by alanl1 View Post
    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.
    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.

    Code:
    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';
    }
    Tab-indentation is a crime against humanity.

  16. #16
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •