Adding a div or table from a button

**Humper** · 10-23-2008, 03:45 PM

I am creating a page that has a form for a customer to fill out. I need to allow the user to add comments one line at a time. What I cant figure out is how can I add a table (or div) by pressing on a button? I need to be able to add an unknown amount of tables and with in that table I need to be able to add rows by pressing on a button. So this is a two step process. I looked into AJAX but I am very new to javascript and I am completely lost. I just need a starting point. Can someone show me a simple example? or use my code to show me.

Here is what my form looks like so far:

Code:

<!-- Connect to the Database -->
<?php

include "common_vars.inc";

mysql_connect($HostName,$UserName, $Password) OR DIE ("Unable to connect to database! Please try again later.");
mysql_select_db($DBName);

$UserName= $_GET["UserName"];

?>

<form name="WDR" action="Add_WDR.php" method="post" >
<div id="container">
	<table width="100%" border="0">
        	<tr>
				<td colspan="2"> image goes here </td>
            	<td colspan="4" align="left">	<span class="heading">Weekly Direct Report</span><br />                </td>
           </tr>
           <tr>
				<td colspan="6"><hr /></td>
		    </tr>
    </table>
	<div class="mainindexTable">
    	<table width="100%" border="0">
            <tr>
           	  <td width="21%">
				<strong>UserName:</strong><br />
       	        <input name="UserName" type="text" id="UserName" size="16" maxlength="16" disabled="disabled" value="<?php echo $UserName; ?>" />
			  </td>
            <td width="13%">
	              <strong>Date:</strong><br />
       	          <input name="ReportDate" type="text" id="ReportDate" size="8" maxlength="8"/>              
            </td>
              <td width="17%">
					<strong>Anticipated Travel:</strong><br />
                	<select name="AnticipatedTravel">
                    	<option value="No" selected="selected">No</option>
                        <option value="Yes">Yes</option>
              </select>              </td>
              <td width="49%">     
					<strong>Anticipated Leave:</strong><br />
					    <select name="AnticipatedLeave">
					      <option value="No" selected="selected">No</option>
					      <option value="Yes">Yes</option>
				        </select>		      
              </td>
          </tr>
          <tr>
          	<td colspan="4">
            	<input type="button" name="AddDO" id="AddDO" value="Add Another DO" onclick="hide()" />
            </td>
          </tr>
          </table>
    </div>
    <div id="Data" class="mainindexTableBG">
    	<table width="100%" border="0" style="display:block" id="Table">
          <tr>
          	<td>
           	  <strong>Select DO:</strong><br />
                <select name="DO1">
                 <option value="#" selected="selected">Task Name</option>
                <?php
		  
		    		$query = "SELECT DO, TaskName FROM DeliveryOrders ORDER BY TaskName";
 		    		$result = mysql_query($query);
					
					while($row= mysql_fetch_array($result))
					{
						$DONum = $row["DO"];
				        $TaskName = $row["TaskName"];	
				        $DO = $TaskName . "   " . $DONum;
					  	echo "<option value=\"$DO\">$DO</option>";
					}	
				?>
                </select>
            </td>
          	<td width="9%">
            <strong>Hours:</strong><br />
                <input name="RegularHours" type="text" id="RegularHours" size="8" maxlength="8"/>
            </td>
            <td width="12%">
       	      <strong>Travel on this DO:</strong><br />
            <input type="checkbox" name="Travel" value="Yes" onclick="hide()"/>Yes</td>
            <td width="13%" id="TravelExp" style="visibility:hidden">
                <strong>Travel Expense:</strong><br />
                $<input name="TravelExp" type="text" id="TravelExp" size="15" maxlength="15"/>
            </td>
            <td width="18%" id="TravelExpODC" style="visibility:hidden">
                <strong>OCD Travel Expense:</strong><br />
              	$<input name="TravelExpODC" type="text" id="TravelExpODC" size="15" maxlength="15"/>
            </td>
            <td width="32%">
                &nbsp;
            </td>
          </tr>
          </table>
          <table width="100%" border="0">
          <tr>
          	<td colspan="3">&nbsp;</td>
          </tr>
          <tr>
          	<td width="34%">
       	    <span class="tableheadings"><?php echo $DO. "Highlights"; ?></span><br />
            	<input name="Highlights" type="text" id="Highlights" size="50" maxlength="100" />
            </td>
           <td width="34%">
         <strong>Select Common Task:</strong><br />
               <select name="CommonTask" id="CommonTask">
               <option value="#" selected="selected">Common Tasks</option>
				<?php
						$query1 = "SELECT TaskDesc FROM CommonTasks ORDER BY TaskDesc";
						$result1 = mysql_query($query1);
						
						 while($row1= mysql_fetch_array($result1))
							{
							 $Task = $row1["TaskDesc"];
							 
							 print "<option value=\"$Task\" > $Task </option>";
							}
			    ?>
               </select>
            </td>
            <td width="32%">
           	  <input type="button" value="Add another Highlight" />
            </td>
          </tr>
          </table>
    </div>
    <div id="End" class="mainindexTable">
    	<table width="100%">
        	<tr>
            <td height="46" colspan="6" align="left"><input name="Submit" type="submit" value="Submit WDR" /> </td>
          </tr>
        </table>
    </div>
</div>
</form>

Here is a link to the page...
http://www.southernsinners.com/WDR/WDR.php

**Jesdisciple** · 10-23-2008, 06:11 PM

Here's an example which adds X new rows to your table of highlights.

I've moved your HTML around a bit because you use strong tags in table cells to simulate table headers. This makes the headers be repeated for every copy of the cells, but headers only need to be at the table's top.

HTML Code:

<html>
  <head>
    <title>Titled Document</title>
    <style type="text/css">
      th{
      text-align: left;
      }
    </style>
  </head>
  <body>
    <form name="WDR" action="Add_WDR.php" method="post" >
      <div id="container">
	<table width="100%" border="0">
          <tr>
	    <td colspan="2"> image goes here </td>
            <td colspan="4" align="left">
	      <span class="heading">Weekly Direct Report</span><br />
	    </td>
          </tr>
          <tr>
	    <td colspan="6"><hr /></td>
	  </tr>
	</table>
	<div class="mainindexTable">
    	  <table width="100%" border="0">
            <tr>
              <td width="21%">
		<strong>UserName:</strong><br />
       	        <input name="UserName" type="text" id="UserName" size="16" maxlength="16" disabled="disabled" value="<?php echo $UserName; ?>" />
	      </td>
              <td width="13%">
	        <strong>Date:</strong><br />
       	        <input name="ReportDate" type="text" id="ReportDate" size="8" maxlength="8"/>              
              </td>
              <td width="17%">
		<strong>Anticipated Travel:</strong><br />
                <select name="AnticipatedTravel">
                  <option value="No" selected="selected">No</option>
                  <option value="Yes">Yes</option>
              </select>              </td>
              <td width="49%">     
		<strong>Anticipated Leave:</strong><br />
		<select name="AnticipatedLeave">
		  <option value="No" selected="selected">No</option>
		  <option value="Yes">Yes</option>
		</select>		      
              </td>
            </tr>
            <tr>
              <td colspan="4">
            	<input type="button" name="AddDO" id="AddDO" value="Add Another DO" onclick="hide()" />
              </td>
            </tr>
          </table>
	</div>
	<div id="Data" class="mainindexTableBG">
    	  <table width="100%" border="0" style="display:block" id="Table">
            <tr>
              <td>
           	<strong>Select DO:</strong><br />
                <select name="DO1">
                  <option value="#" selected="selected">Task Name</option>
                  <?php
		    $query = "SELECT DO, TaskName FROM DeliveryOrders ORDER BY TaskName";
 		    $result = mysql_query($query);
		    
		    while($row= mysql_fetch_array($result))
		    {
                      $DONum = $row["DO"];
                      $TaskName = $row["TaskName"];	
                      $DO = $TaskName . "   " . $DONum;
                      echo "<option value=\"$DO\">$DO</option>";
                    }	
		  ?>
                </select>
              </td>
              <td width="9%">
		<strong>Hours:</strong><br />
                <input name="RegularHours" type="text" id="RegularHours" size="8" maxlength="8"/>
              </td>
              <td width="12%">
       		<strong>Travel on this DO:</strong><br />
		<input type="checkbox" name="Travel" value="Yes" onclick="hide()"/>Yes</td>
              <td width="13%" id="TravelExp" style="visibility:hidden">
                <strong>Travel Expense:</strong><br />
                $<input name="TravelExp" type="text" id="TravelExp" size="15" maxlength="15"/>
              </td>
              <td width="18%" id="TravelExpODC" style="visibility:hidden">
                <strong>OCD Travel Expense:</strong><br />
              	$<input name="TravelExpODC" type="text" id="TravelExpODC" size="15" maxlength="15"/>
              </td>
              <td width="32%">
                &nbsp;
              </td>
            </tr>
          </table>
          <table width="100%" border="0">
            <tr>
              <td colspan="3">&nbsp;</td>
            </tr>
	    <tr>
	      <th align="left"><?php echo $DO. "Highlights"; ?></th>
	      <th align="left">Select Common Task:</th>
	    </tr>
            <tr>
              <td width="34%">
            	<input name="Highlights" type="text" id="Highlights" size="50" maxlength="100" />
              </td>
              <td width="34%">
		<select name="CommonTask" id="CommonTask">
		  <option value="#" selected="selected">Common Tasks</option>
		  <?php
		     $query1 = "SELECT TaskDesc FROM CommonTasks ORDER BY TaskDesc";
		     $result1 = mysql_query($query1);
		     
		     while($row1= mysql_fetch_array($result1))
		     {
		     $Task = $row1["TaskDesc"];
		     
		     print "<option value=\"$Task\" > $Task </option>";
		     }
		     ?>
		</select>
              </td>
              <td width="32%">
           	<input type="button" value="Add another Highlight" id="AddHighlight" />
              </td>
            </tr>
          </table>
	</div>
	<div id="End" class="mainindexTable">
    	  <table width="100%">
            <tr>
              <td height="46" colspan="6" align="left"><input name="Submit" type="submit" value="Submit WDR" /> </td>
            </tr>
          </table>
	</div>
      </div>
    </form>
    <script type="text/javascript" src="Duplicator.js"></script>
  </body>
</html>

Duplicator.js

Code:

//Change anything but this function.
function makeDuplicator(button, element, callback){
  //If 'callback' was passed, pass the prototype through it.
  var prototype = (callback || function(e){return e;})(element.cloneNode(true));
  button.onclick = function(){
    element.parentNode.appendChild(prototype.cloneNode(true));
  };
}
var addHighlight = document.getElementById('AddHighlight');
var callback = function(prototype){
  //Get rid of the button.
  prototype.deleteCell(2);
  //Blank the text input in case the page was refreshed.
  prototype.cells[0].childNodes[1].value = '';
  return prototype;
};
//The second argument is the row which contains the button.
makeDuplicator(addHighlight, addHighlight.parentNode.parentNode, callback);

**Humper** · 10-23-2008, 07:02 PM

Jesdisciple ----- Thank You!! That works great!

I do have a problem tho... I need to put this information into a database and it seems that this would only get the last highlight? How can I create a unique ID for each row(highlight) I add?

Another issue is how can I create a new instance of the entire gray section. I also need to add this information to a database... so it would also need to be able to create unique IDs.

**Jesdisciple** · 10-23-2008, 07:09 PM

Append [] to each field's name attribute and access them all as an array without the [] in the name.

PHP Code:


$Highlights = $_POST['Highlights'];
for($ = 0; $i < count($Highlights); $i++){
    //Do something with '$Highlights[$i]'.
}

HTML Code:

              <td width="34%">
            	<input name="Highlights[]" type="text" id="Highlights" size="50" maxlength="100" />
              </td>

As for the id, I hope no script needs that, because it will only return the first one. Use getElementsByName('Highlights[]') instead.

Another issue is how can I create a new instance of the entire gray section.

I don't understand... What gray section? EDIT: Oh, the username? And only that?

**Humper** · 10-23-2008, 07:24 PM

Thanks that will work for my first question....

"What gray section? EDIT: Oh, the username? And only that? " ---- No

Sorry I didnt explain better.....I mean the whole <div id="Data" class="mainindexTableBG"> section...

check out the link in the first post.. the Add Another DO button needs to add another (gray)section and I need all those fields to also be able to be added to a database..

Hopfully that is a little clearer....

**Jesdisciple** · 10-23-2008, 09:07 PM

Ooh... That complicates things a good bit because 1) the onclick handler won't get copied with its button, so the callbacks have to be nested and 2) the form data arrays I just described need to be two-dimensional (but only inside the "Highlights" table).

To accomplish #2, you'll have to end every name inside the "Highlights" table with [0][] instead of just []. Also, keep the id values of those same elements identical to the name values except without the [0][]. I'll increment the index so PHP will understand.

Code:

function makeDuplicator(button, element, callback, nestingCallback){
  //If 'callback' was passed, pass the prototype through it.
  var prototype = (callback || lazy)(element.cloneNode(true));
  button.onclick = function(){
    //If 'nestingCallback' was passed, pass the clone through it.
    var clone = (nestingCallback || lazy)(prototype.cloneNode(true));
    element.parentNode.appendChild(clone);
  };
  function lazy(e){
    return e;
  }
}
var nestedCallback = function(prototype){
  //Get rid of the button.
  prototype.deleteCell(2);
  //Blank the text input in case the page was refreshed.
  prototype.cells[0].childNodes[1].value = '';
  return prototype;
};

//The callback (below) won't do this because it never sees the original DIV.
var addHighlight = document.getElementById('AddHighlight');
makeDuplicator(addHighlight, addHighlight.parentNode.parentNode, nestedCallback);

var callback = function(clone){
  var highlights = clone.childNodes[3].rows[2];

  //Leave instructions for PHP or it will get confused.
  callback.index++;
  updateNameOf(highlights.cells[0].childNodes[1]);
  updateNameOf(highlights.cells[1].childNodes[1]);
  function updateNameOf(element){
    element.name = element.id + '[' + callback.index + '][]';
  }

  var addHighlight = highlights.cells[2].childNodes[1];
  makeDuplicator(addHighlight, addHighlight.parentNode.parentNode, nestedCallback);
  return clone;
};
callback.index = 0;

makeDuplicator(document.getElementById('AddDO'), document.getElementById('Data'), null, callback);

**Humper** · 10-24-2008, 01:37 PM

OK... I had to do a little redesign on the form. I needed to capture data in a different way. I just broke one of the sections into two different <div> sections.

I am having issues getting the sections to duplicate. I am trying to understand the javascript you posted but I thought I would go ahead and ask if you could help me figure out what I am doing wrong...

http://www.southernsinners.com/WDR/WDR.php
From the above site.... I need the "Add Another DO" button to add a whole new gray section(<div id="DOandHours">) to the page... this is independent of anything else..... Then I also need the "Add Another Task" button to add a whole new blue section(<div id="TaskAndHighlights">) to the page.

Here is my code:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Weekly Direct Report for <?php echo $UserName; ?></title>
<link href="style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">

//function to unhide fields
function hide() 
{
if(document["WDR"]["Travel"].checked)
	{
	 document.getElementById("TravelExpTD").style.visibility="visible"
	 document.getElementById("TravelExpODCTD").style.visibility="visible"
	}
else
	{
	 document.getElementById("TravelExpTD").style.visibility="hidden"
	 document.getElementById("TravelExpODCTD").style.visibility="hidden"
	}
}

</script>

</head>

<body>

<!-- Connect to the Database -->
<?php

//connection here

$UserName= $_GET["UserName"];

?>

<form name="WDR" action="Add_WDR.php" method="post" >
<div id="container">
	<table width="100%" border="0">
        	<tr>
				<td colspan="2"> <!-- <img src="" alt="IMG" /> --> </td>
            	<td colspan="4" align="left">	<span class="heading">Weekly Direct Report</span><br />                </td>
           </tr>
           <tr>
				<td colspan="6"><hr /></td>
		    </tr>
    </table>
	<div class="mainindexTable">
    	<table width="100%" border="0">
            <tr>
           	  <td width="21%">
				<strong>UserName:</strong><br />
       	        <input name="UserName" type="text" id="UserName" size="16" maxlength="16" disabled="disabled" value="<?php echo $UserName; ?>" />
			  </td>
            <td width="13%">
	              <strong>Date:</strong><br />
       	          <input name="ReportDate" type="text" id="ReportDate" size="8" maxlength="8"/>              
            </td>
              <td width="17%">
					<strong>Anticipated Travel:</strong><br />
                	<select name="AnticipatedTravel">
                    	<option value="No" selected="selected">No</option>
                        <option value="Yes">Yes</option>
              </select>              </td>
              <td width="49%">     
					<strong>Anticipated Leave:</strong><br />
					    <select name="AnticipatedLeave">
					      <option value="No" selected="selected">No</option>
					      <option value="Yes">Yes</option>
				        </select>		      
              </td>
          </tr>
          <tr>
          	<td colspan="4">&nbsp;
            	
            </td>
          </tr>
          <!--<tr>
          	<td colspan="4">
            	<input type="button" name="AddDO" id="AddDO" value="Add Another DO" />
            </td>
          </tr> -->
          </table>
    </div>
    <div id="DOandHours" class="mainindexTableBG">
    	<table width="100%" border="0" style="display:block" id="Table">
          <tr>
          	<td width="16%">
            	<input type="button" name="AddDO" id="AddDO" value="Add Another DO" />
            </td>
          </tr>
          <tr>
          	<td>
           	  <strong>Select DO:</strong><br />
                <select name="DO1">
                 <option value="#" selected="selected">Select DO</option>
                <?php
		  
		    		//$query = "SELECT DO, TaskName FROM DeliveryOrders ORDER BY TaskName";
					$query = "SELECT DO FROM DeliveryOrders ORDER BY DO DESC";
 		    		$result = mysql_query($query);
					
					while($row= mysql_fetch_array($result))
					{
						$DONum = $row["DO"];
				        //$TaskName = $row["TaskName"];	
				        //$DO = $TaskName . "   " . $DONum;
					  	//echo "<option name=\"DONum[]\" value=\"$DO\">$DO</option>";
						echo "<option name=\"DONum[][]\" value=\"$DONum\">$DONum</option>";
					}	
				?>
                </select>
            </td>
          	<td width="9%">
            <strong>Hours:</strong><br />
                <input name="RegularHours[][]" type="text" id="RegularHours" size="8" maxlength="8"/>
            </td>
            <td width="12%">
       	      <strong>Travel on this DO:</strong><br />
            <input type="checkbox" name="Travel" value="Yes" onclick="hide()"/>Yes</td>
            <td width="15%" id="TravelExpTD" style="visibility:hidden">
                <strong>Travel Expense:</strong><br />
                $<input name="TravelExp[][]" type="text" id="TravelExp" size="15" maxlength="15"/>
            </td>
            <td width="18%" id="TravelExpODCTD" style="visibility:hidden">
              <strong>OCD Travel Expense:</strong><br />
              	$<input name="TravelExpODC[][]" type="text" id="TravelExpODC" size="15" maxlength="15"/>
            </td>
          </tr>
      </table>
    </div>
       <div id="TaskAndHighlights" class="mainindexTableTask">
         <table width="100%" border="0">
           <tr>
             <td><input type="button" value="Add Another Task" id="AddTask" />
             </td>
           </tr>
           <tr>
             <th align="left">Task:</th>
           </tr>
           <tr>
             <td><select name="WorkedTask">
                 <option value="#" selected="selected">Task Name</option>
                 <?php
		  
		    		$query = "SELECT TaskName FROM DeliveryOrders ORDER BY TaskName";
 		    		$result = mysql_query($query);
					
					while($row= mysql_fetch_array($result))
					{
				        $TaskName = $row["TaskName"];
					  	echo "<option name=\"TaskName[][]\" value=\"$TaskName\">$TaskName</option>";
					}	
				?>
               </select>
             </td>
           </tr>
           <tr>
             <th align="left">Highlights:</th>
             <th align="left">Select Common Task:</th>
           </tr>
           <tr>
             <td width="34%"><input name="Highlights[][]" type="text" id="Highlights" size="50" maxlength="100" />
             </td>
             <td width="34%"><select name="CommonTask" id="CommonTask">
                 <option value="#" selected="selected">Common Tasks</option>
                 <?php
						$query1 = "SELECT TaskDesc FROM CommonTasks ORDER BY TaskDesc";
						$result1 = mysql_query($query1);
						
						 while($row1= mysql_fetch_array($result1))
							{
							 $Task = $row1["TaskDesc"];
							 
							 print "<option value=\"$Task\" > $Task </option>";
							}
			    ?>
               </select>
             </td>
             <td width="32%"><input type="button" value="Add another Highlight" id="AddHighlight" />
             </td>
           </tr>
         </table>
       </div>
  <div id="End" class="mainindexTable">
    	<table width="100%">
        	<tr>
            <td height="46" colspan="6" align="left"><input name="Submit" type="submit" value="Submit WDR" /> </td>
          </tr>
        </table>
    </div>
</div>
</form>
<script type="text/javascript" src="Duplicator.js"></script>

</body>
</html>

And here is the javascript code I am using:

Code:

function makeDuplicator(button, element, callback, nestingCallback){
  //If 'callback' was passed, pass the prototype through it.
  var prototype = (callback || lazy)(element.cloneNode(true));
  button.onclick = function(){
    //If 'nestingCallback' was passed, pass the clone through it.
    var clone = (nestingCallback || lazy)(prototype.cloneNode(true));
    element.parentNode.appendChild(clone);
  };
  function lazy(e){
    return e;
  }
}
var nestedCallback = function(prototype){
  //Get rid of the button.
  prototype.deleteCell(2);
  //Blank the text input in case the page was refreshed.
  prototype.cells[0].childNodes[1].value = '';
  return prototype;
};

//The callback (below) won't do this because it never sees the original DIV.
var addHighlight = document.getElementById('AddHighlight');
makeDuplicator(addHighlight, addHighlight.parentNode.parentNode, nestedCallback);

var callback = function(clone){
  var highlights = clone.childNodes[3].rows[2];

  //Leave instructions for PHP or it will get confused.
  callback.index++;
  updateNameOf(highlights.cells[0].childNodes[1]);
  updateNameOf(highlights.cells[1].childNodes[1]);
  function updateNameOf(element){
    element.name = element.id + '[' + callback.index + '][]';
  }

  var addHighlight = highlights.cells[2].childNodes[1];
  makeDuplicator(addHighlight, addHighlight.parentNode.parentNode, nestedCallback);
  return clone;
};
callback.index = 0;

makeDuplicator(document.getElementById('AddDO'), document.getElementById('DOandHours'), null, callback);

**Jesdisciple** · 10-24-2008, 05:24 PM

Before I start on the JS, I want to clarify three points about the forms and let you respond while I look at the code.

In select menus, select elements have names and option elements have values, but options do not have names. You will get a nasty surprise if you try to code PHP like that.
That [][] suffix will not work (EDIT: at least not by itself, I don't know whether it would with help from JS), which is why I said to use [0][] and let me increment the first index. When PHP sees [] in either PHP code or form names, it appends an index to ("pushes" an element onto) the array named just before the brackets. When you use [][], PHP reads it as [$length][0], so the second dimension is entirely useless.
The second dimension is only appropriate for form elements inside an area which is duplicated by the JavaScript.

Also, completely unrelated to forms, your HTML violates its XHTML doctype several times over, and validating it would be a great way for you to help me get this done for you if you have any problems after this. Reasonable indentation would be an even better way.

**Humper** · 10-24-2008, 06:04 PM

OK sorry about that.. I just went to w3schools and validated the code... it's all valid now.. or so it says... I also fixed the select statements to not have name in the option element.... I have good indention in Dreamweaver but when I copy and paste the code it gets messed up.. sorry I will try and format this better...

HTML Code:

<form name="WDR" action="Add_WDR.php" method="post" >
<div id="container">
	<table width="100%" border="0">
        	<tr>
		  <td colspan="2"> <!-- <img src="" alt="IMG" /> --> </td>
            	  <td colspan="4" align="left"><span class="heading">Weekly Direct Report</span><br /></td>
               </tr>
               <tr>
		  <td colspan="6"><hr /></td>
	       </tr>
        </table>
	<div class="mainindexTable">
    	  <table width="100%" border="0">
            <tr>
           	  <td width="21%">
		    <strong>UserName:</strong><br />
       	            <input name="UserName" type="text" id="UserName" size="16" maxlength="16" disabled="disabled" value="<?php echo $UserName; ?>" />
                  </td>
                  <td width="13%">
	            <strong>Date:</strong><br />
       	            <input name="ReportDate" type="text" id="ReportDate" size="8" maxlength="8"/>              
                  </td>
                  <td width="17%">
		    <strong>Anticipated Travel:</strong><br />
                    <select name="AnticipatedTravel">
                      <option value="No" selected="selected">No</option>
                      <option value="Yes">Yes</option>
                    </select>
                  </td>
                  <td width="49%">     
		    <strong>Anticipated Leave:</strong><br />
		    <select name="AnticipatedLeave">
			<option value="No" selected="selected">No</option>
			<option value="Yes">Yes</option>
		    </select>		      
                  </td>
          </tr>
          <tr>
          	<td colspan="4">&nbsp;</td>
          </tr>
          <!--<tr>
          	<td colspan="4">
            	<input type="button" name="AddDO" id="AddDO" value="Add Another DO" />
            </td>
          </tr> -->
        </table>
    </div>
    <div id="DOandHours" class="mainindexTableBG">
    	<table width="100%" border="0" style="display:block" id="Table">
          <tr>
            <td width="16%">
            	<input type="button" name="AddDO" id="AddDO" value="Add Another DO" />
            </td>
          </tr>
          <tr>
            <td>
           	<strong>Select DO:</strong><br />
                <select name="DO[0][]" id="DO">
                 <option value="#" selected="selected">Select DO</option>
                 <?php
		  
		    //$query = "SELECT DO, TaskName FROM DeliveryOrders ORDER BY TaskName";
		   $query = "SELECT DO FROM DeliveryOrders ORDER BY DO DESC";
 		   $result = mysql_query($query);
					
					while($row= mysql_fetch_array($result))
					{
						$DONum = $row["DO"];
						echo "<option value=\"$DONum\">$DONum</option>";
					}	
		 ?>
                </select>
            </td>
            <td width="9%">
              <strong>Hours:</strong><br />
              <input name="RegularHours[0][]" type="text" id="RegularHours" size="8" maxlength="8"/>
            </td>
            <td width="12%">
       	      <strong>Travel on this DO:</strong><br />
              <input type="checkbox" name="Travel" value="Yes" onclick="hide()"/>Yes
            </td>
            <td width="15%" id="TravelExpTD" style="visibility:hidden">
                <strong>Travel Expense:</strong><br />
                $<input name="TravelExp[0][]" type="text" id="TravelExp" size="15" maxlength="15"/>
            </td>
            <td width="18%" id="TravelExpODCTD" style="visibility:hidden">
              <strong>OCD Travel Expense:</strong><br />
              	$<input name="TravelExpODC[0][]" type="text" id="TravelExpODC" size="15" maxlength="15"/>
            </td>
          </tr>
      </table>
    </div>
       <div id="TaskAndHighlights" class="mainindexTableTask">
         <table width="100%" border="0">
           <tr>
             <td><input type="button" value="Add Another Task" id="AddTask" /></td>
           </tr>
           <tr>
             <th align="left">Task:</th>
           </tr>
           <tr>
             <td>
                 <select name="WorkedTask[0][]" id="WorkedTask">
                   <option value="#" selected="selected">Task Name</option>
                   <?php
		  
		    		$query = "SELECT TaskName FROM DeliveryOrders ORDER BY TaskName";
 		    		$result = mysql_query($query);
					
					while($row= mysql_fetch_array($result))
					{
				                $TaskName = $row["TaskName"];
					  	echo "<option value=\"$TaskName\">$TaskName</option>";
					}	
		   ?>
               </select>
             </td>
           </tr>
           <tr>
             <th align="left">Highlights:</th>
             <th align="left">Select Common Task:</th>
           </tr>
           <tr>
             <td width="34%"><input name="Highlights[0][]" type="text" id="Highlights" size="50" maxlength="100" /></td>
             <td width="34%">
                <select name="CommonTask" id="CommonTask">
                 <option value="#" selected="selected">Common Tasks</option>
                 <?php
			$query1 = "SELECT TaskDesc FROM CommonTasks ORDER BY TaskDesc";
			$result1 = mysql_query($query1);
						
			while($row1= mysql_fetch_array($result1))
			{
			 $Task = $row1["TaskDesc"];
			 print "<option value=\"$Task\" > $Task </option>";
			}
		?>
               </select>
             </td>
             <td width="32%"><input type="button" value="Add another Highlight" id="AddHighlight" /></td>
             <td>
                <input type="button" value="Remove Highlight" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />  <!-- This doesnt work correctly -->
             </td>
           </tr>
         </table>
       </div>
  <div id="End" class="mainindexTable">
    	<table width="100%">
          <tr>
            <td height="46" colspan="6" align="left"><input name="Submit" type="submit" value="Submit WDR" /> </td>
          </tr>
        </table>
  </div>
</div>
</form>
<script type="text/javascript" src="Duplicator.js"></script>

Hopefully that's formatted a little better!

**Jesdisciple** · 10-24-2008, 07:13 PM

I don't mean to sound like a drill sergeant; it's sometimes hard for me to gauge how much force I'm putting into my statements (and how much others intended in theirs). Plus going through a lot of poorly formatted sources gets old fast - but the experience and ideas I get are easily worth it.

Just to check... Do you use Design View (or Mode, or whatever it is) in Dreamweaver? If so, please stop; the worst coder in the world is surely a WYSIWYG.

Also, I advise you to post this page in the HTML forum and ask what could be done better. Using a lot more CSS instead of all the styling HTML attributes is the first thing I would suggest. Not using tables so much might be the second; if not, using table headers would be.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
    
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Weekly Direct Report for </title>
    <link href="index_files/style.css" rel="stylesheet" type="text/css" />
    
    <script type="text/javascript">
      
      //function to unhide fields
      function hide(){
      if(document["WDR"]["Travel"].checked)
      {
      document.getElementById("TravelExpTD").style.visibility="visible"
      document.getElementById("TravelExpODCTD").style.visibility="visible"
      }
      else
      {
      document.getElementById("TravelExpTD").style.visibility="hidden"
      document.getElementById("TravelExpODCTD").style.visibility="hidden"
      }
      }
      
    </script>
    
  </head>
  <body>
    
    <!-- Connect to the Database -->
    
    <form name="WDR" action="Add_WDR.php" method="post">
      <div id="container">
	<table border="0" width="100%">
          <tbody>
	    <tr>
	      <td colspan="2"><!-- <img src="" alt="IMG" /> --></td>
              <td colspan="4" align="left">
		<span class="heading">Weekly Direct Report</span><br />
	      </td>
            </tr>
            <tr>
	      <td colspan="6">
		<hr />
	      </td>
	    </tr>
	  </tbody>
	</table>
	<div class="mainindexTable">
    	  <table border="0" width="100%">
            <tbody>
	      <tr>
		<th align="left">UserName:</th>
		<th align="left">Date:</th>
		<th align="left">Anticipated Travel:</th>
		<th align="left">Anticipated Leave:</th>
	      </tr>
	      <tr>
           	<td width="21%">
       	            <input name="UserName" id="UserName" size="16" maxlength="16" disabled="disabled" value="" type="text" />
		</td>
		<td width="13%">
       	          <input name="ReportDate" id="ReportDate" size="8" maxlength="8" type="text" />
		</td>
		<td width="17%">
                  <select name="AnticipatedTravel">
                    <option value="No" selected="selected">No</option>
                    <option value="Yes">Yes</option>
		  </select>
		</td>
		<td width="49%">
		  <select name="AnticipatedLeave">
		    <option value="No" selected="selected">No</option>
		    <option value="Yes">Yes</option>
		  </select>		      
		</td>
              </tr>
              <tr>
          	<td colspan="4">&nbsp;</td>
              </tr>
              <!--<tr>
          	  <td colspan="4">
            	    <input type="button" name="AddDO" id="AddDO" value="Add Another DO" />
		  </td>
		</tr> -->
            </tbody>
	  </table>
	</div>
	<div id="DOandHours" class="mainindexTableBG">
    	  <table style="display: block;" id="Table" border="0" width="100%">
            <tbody>
	      <tr>
          	<td width="16%">
            	  <input name="AddDO" id="AddDO" value="Add Another DO" type="button" />
		</td>
              </tr>
	      <tr>
		<th align="left">Select DO:</th>
		<th align="left">Hours:</th>
		<th align="left">Travel on this DO:</th>
		<th align="left">Travel Expense:</th>
		<th align="left">OCD Travel Expense:</th>
	      </tr>
              <tr>
          	<td>
                  <select name="DO1">
                    <option value="#" selected="selected">Select DO</option>
                    <option name="DONum[][]" value="9987.99.01">9987.99.01</option>
		    <option name="DONum[][]" value="9032.90">9032.90</option>
		    <option name="DONum[][]" value="5993.02">5993.02</option>
		    <option name="DONum[][]" value="1234.56">1234.56</option>
		  </select>
		</td>
          	<td width="9%">
                  <input name="RegularHours[][]" id="RegularHours" size="8" maxlength="8" type="text" />
		</td>
		<td width="12%">
		  <input name="Travel" value="Yes" onclick="hide()" type="checkbox" />Yes
		</td>
		<td id="TravelExpTD" style="visibility: hidden;" width="15%">
                  $<input name="TravelExp[][]" id="TravelExp" size="15" maxlength="15" type="text" />
		</td>
		<td id="TravelExpODCTD" style="visibility: hidden;" width="18%">
              	  $<input name="TravelExpODC[][]" id="TravelExpODC" size="15" maxlength="15" type="text" />
		</td>
              </tr>
	    </tbody>
	  </table>
	</div>
	<div id="TaskAndHighlights" class="mainindexTableTask">
          <table border="0" width="100%">
            <tbody>
	      <tr>
		<td><input value="Add Another Task" id="AddTask" type="button" /></td>
              </tr>
              <tr>
		<th align="left">Task:</th>
              </tr>
              <tr>
		<td>
		  <select name="WorkedTask[0][]" id="WorkedTask">
                    <option value="#" selected="selected">Task Name</option>
                    <option value="Hello World">Hello World</option>
		    <option value="Somthing Else">Something Else</option>
		    <option value="Training">Training</option>
		    <option value="Whatever">Whatever</option>
		  </select>
		</td>
              </tr>
              <tr>
		<th align="left">Highlights:</th>
		<th align="left">Select Common Task:</th>
              </tr>
              <tr>
		<td width="34%"><input name="Highlights[0][]" id="Highlights" size="50" maxlength="100" type="text" /></td>
		<td width="34%">
		  <select name="CommonTask[0][]" id="CommonTask">
                    <option value="#" selected="selected">Common Tasks</option>
                    <option value="Security Meeting."> Security Meeting. </option>
		    <option value="SWWG Meeting"> SWWG Meeting </option>
		  </select>
		</td>
		<td width="32%"><input value="Add another Highlight" id="AddHighlight" type="button" /></td>
              </tr>
            </tbody>
	  </table>
	</div>
	<div id="End" class="mainindexTable">
    	  <table width="100%">
            <tbody>
	      <tr>
		<td colspan="6" align="left" height="46"><input name="Submit" value="Submit WDR" type="submit" /></td>
	      </tr>
            </tbody>
	  </table>
	</div>
      </div>
    </form>
    <script type="text/javascript" src="Duplicator.js"></script>
  </body>
</html>

Code:

function makeDuplicator(button, element, cb_dress, cb_append){
  var prototype = element.cloneNode(true);
  button.onclick = function(){
    //Dress the clone.
    var clone = (cb_dress || lazy)(prototype.cloneNode(true));
    //Append the clone.
    if(cb_append) //Native objects apparently don't like short-circuit operators.
      cb_append(clone, element);
    else
      element.parentNode.appendChild(clone);
  };
  function lazy(e){
    return e;
  }
}
var element = document.getElementById('DOandHours').getElementsByTagName('table')[0].rows[1];
makeDuplicator(document.getElementById('AddDO'), element);

function dressHighlight(clone){
  //Get rid of the button.
  clone.deleteCell(2);
  //Blank the text input in case the page was refreshed.
  clone.cells[0].getElementsByTagName('input')[0].value = '';
  return clone;
};

//The callback (below) won't do this because it never sees the original DIV.
var addHighlight = document.getElementById('AddHighlight');

makeDuplicator(addHighlight, addHighlight.parentNode.parentNode, dressHighlight);


function dressTask(clone){
  var table = clone.getElementsByTagName('table')[0];
  var highlights = table.rows[4];

  //Leave instructions for PHP or it will get confused.
  dressTask.index++;
  updateNameOf(table.rows[2].cells[0].getElementsByTagName('select')[0]);
  updateNameOf(highlights.cells[0].getElementsByTagName('input')[0]);
  updateNameOf(highlights.cells[1].getElementsByTagName('select')[0]);
  function updateNameOf(element){
    element.name = element.id + '[' + dressTask.index + '][]';
  }

  var addHighlight = highlights.cells[2].getElementsByTagName('input')[0];
  makeDuplicator(addHighlight, addHighlight.parentNode.parentNode, dressHighlight);
  return clone;
};
dressTask.index = 0;

//This is a more complex appendage, so we'll handle it.
function appendTask(clone, element){
  element.parentNode.insertBefore(clone, document.getElementById('End'));
}

makeDuplicator(document.getElementById('AddTask'), document.getElementById('TaskAndHighlights'), dressTask, appendTask);