asked on

Adding Row to Table with Contents

Can someone show me how to add a row on to this table when the "add" button is clicked?

I want this to be added when the button gets clicked:
<tr>
<td>
<input type="file" name="fileupload[]">
</td>
</tr>

<input type="button" name="add">
<form name="upload" method="post" action="upload.php" enctype="multipart/form-data">
<table>
<tr>
<td>
<input type="file" name="fileupload[]">
</td>
</tr>
<tr>
<td>
<input type="file" name="fileupload[]">
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit">
</td>
</tr>
</table>
</form>

Open in new window

experts1

EMB01,

This example uses javascript "replace" to re-format the innerHtml of the upload form.

You can comment out the alert, which was to show the current innerHtml content of upload form.

Regards

<html><head><title>Add New Row In Table</title>
<SCRIPT language=JavaScript type=text/javascript>
var z_num, tmpStr
z_num=0
function addNewRow(){
  z_num += 1
  var tRow='<tr><td><input type="text" name='+'"newText'+z_num+'"></td></tr>';
  tmpStr=document.getElementById("upload").innerHTML
  tmpStr=tmpStr.replace("</TBODY></TABLE>",tRow+"</TBODY></TABLE>")
  document.getElementById("upload").innerHTML = tmpStr;
alert(tmpStr)
}
</SCRIPT></head>
<body> 
<input type="button" value="Add Row" name="add" onClick="addNewRow();">
<form name="upload" method="post" action="upload.php" enctype="multipart/form-data">
<table name="table1">
<tr>
<td>
<input type="file" name="fileupload[]">
</td>
</tr>
<tr>
<td>
<input type="file" name="fileupload[]">
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit">
</td>
</tr>
</table>
</form>
 
</body>
</html>

Open in new window

experts1

EMB01,

Use this updated code for better cross-browser compatibility:

Regards

<html><head><title>Add New Row In Table</title>
<SCRIPT language=JavaScript type=text/javascript>
var z_num, tmpStr
z_num=0
function addNewRow(){
  z_num += 1
  var tRow='<tr><td><input type="text" name='+'"newText'+z_num+'"></td></tr>';
  tmpStr=upload.innerHTML
  tmpStr=tmpStr.replace("</TBODY></TABLE>","</tbody></table>")
  tmpStr=tmpStr.replace("</tbody></table>",tRow+"</tbody></table>")
  upload.innerHTML = tmpStr;
alert(tmpStr)
}
</SCRIPT></head>
<body> 
<input type="button" value="Add Row" name="add" onClick="addNewRow();">
<form name="upload" method="post" action="upload.php" enctype="multipart/form-data">
<table name="table1">
<tr>
<td>
<input type="file" name="fileupload[]">
</td>
</tr>
<tr>
<td>
<input type="file" name="fileupload[]">
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit">
</td>
</tr>
</table>
</form>
 
</body>
</html>

Open in new window

EMB01

ASKER

Thanks for your help; but, it doesn't seem to work. Attached is what I'm working with. I just want it to add this when the button gets clicked:
<tr>
<th scope="col"><span class="asterisk">*</span> File: </th>
<td scope="col"><input type="file" name="file" /></td>
</tr>
<tr>
<th scope="col">Caption:</th>
<td scope="col"><input name="c" type="text" id="c" /></td>
</tr>

I don't know much about JS (I do PHP), but I read an article that said I needed to use the append_child (or something like that) function. Maybe you can adapt it:
http://www.javascriptkit.com/javatutors/dom2.shtml

And, if possible I would like to have the option to delete a row, too. But, I can open up another question for that if it's too much.

<html><head><title>Add New Row In Table</title>
<SCRIPT language=JavaScript type=text/javascript>
var z_num, tmpStr
z_num=0
function addNewRow(){
  z_num += 1
  var tRow='<tr><td><input type="text" name='+'"newText'+z_num+'"></td></tr>';
  tmpStr=upload.innerHTML
  tmpStr=tmpStr.replace("</TBODY></TABLE>","</tbody></table>")
  tmpStr=tmpStr.replace("</tbody></table>",tRow+"</tbody></table>")
  upload.innerHTML = tmpStr;
alert(tmpStr)
}
</SCRIPT></head>
<body>
	<input type="button" value="Add Row" name="add" onClick="addNewRow();">
	<form action="add-photos.php" method="post" enctype="multipart/form-data" name="form1" id="form1" onsubmit="WAValidateRQ(document.form1.un,'- Username is required',document.form1.un,0,true,'text');WAValidateRQ(document.form1.pw,'- Password is required',document.form1.pw,0,true,'text');WAAlertErrors('The following errors were found','Correct invalid entries to continue',true,false);return document.MM_returnValue" >
	<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th scope="col"><span class="asterisk">*</span> Album: </th>
    <td scope="col"><select name="a" id="a">
	<?php do {
      echo "<option value=\"" . $row_Albums['id_albums'] . "\">" . $row_Albums['name_albums'] . "</option>";
	  } while($row_Albums = mysql_fetch_assoc($Albums));
	  ?>
    </select></td>
  </tr>
  <tr>
    <th scope="col"><span class="asterisk">*</span> File: </th>
    <td scope="col"><input type="file" name="file" /></td>
  </tr>
  <tr>
    <th scope="col">Caption:</th>
    <td scope="col"><input name="c" type="text" id="c" /></td>
  </tr>
  <tr>
    <td colspan="2" scope="col">
      <div align="right">
        <input name="submit" type="submit" class="button" id="submit" value="Submit" />    
		<span class="forgotpassword"><a href="/r/manage/photo-gallery.php">Cancel</a></span>
      </div></td>
    </tr>
</table>
</form>
</body>
</html>

Open in new window

experts1

EMB01,

This will work now.

Updated code to use "document.getElementById("form1").innerHTML" works much more reliable as per code below:

Also inserted code to reset form to original state.

Note: 1. body onLoad event saves initial form innerHTML:
2. reset button calls resetForm function:

Regards

<html><head><title>Add New Row In Table</title>
<SCRIPT language=JavaScript type=text/javascript>
var z_num, tmpStr, oldstr
z_num=0
function getOldStr() {
oldstr=document.getElementById("form1").innerHTML;
}
function addNewRow(){
  z_num += 1;
  if(z_num==1) oldstr=document.getElementById("form1").innerHTML;
  var tRow='<tr><td><input type="file" name='+'"newText'+z_num+'"></td></tr>';
  tmpStr=document.getElementById("form1").innerHTML;
  tmpStr=tmpStr.replace("</TBODY></TABLE>","</tbody></table>");
  tmpStr=tmpStr.replace("</tbody></table>",tRow+"</tbody></table>");
  document.getElementById("form1").innerHTML = tmpStr;
//alert(tmpStr);
}
function resetForm(){
  document.getElementById("form1").innerHTML = oldstr;
}
</SCRIPT></head>
<body onLoad="getOldStr();">
	<input type="button" value="Add Row" name="add" onClick="addNewRow();">&nbsp
	<input type="button" value="Reset" name="Reset" onClick="resetForm();">
	<form action="add-photos.php" method="post" enctype="multipart/form-data" 
	name="form1" id="form1" onsubmit="WAValidateRQ(document.form1.un,'- Username is required',doc
	ument.form1.un,0,true,'text');WAValidateRQ(document.form1.pw,'- Password is required',doc
	ument.form1.pw,0,true,'text');WAAlertErrors('The following errors were found','Correct invalid 
	entries to continue',true,false);return document.MM_returnValue;" >
	<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th scope="col"><span class="asterisk">*</span> Album: </th>
    <td scope="col"><select name="a" id="a">
	<?php do {
      echo "<option value=\"" . $row_Albums['id_albums'] . "\">" . $row_Albums['name_albums'] . "</option>";
	  } while($row_Albums = mysql_fetch_assoc($Albums));
	  ?>
    </select></td>
  </tr>
  <tr>
    <th scope="col"><span class="asterisk">*</span> File: </th>
    <td scope="col"><input type="file" name="file" /></td>
  </tr>
  <tr>
    <th scope="col">Caption:</th>
    <td scope="col"><input name="c" type="text" id="c" /></td>
  </tr>
  <tr>
    <td colspan="2" scope="col">
      <div align="right">
        <input name="submit" type="submit" class="button" id="submit" value="Submit" />    
		<span class="forgotpassword"><a href="/r/manage/photo-gallery.php">Cancel</a></span>
      </div></td>
    </tr>
</table>
</form>
</body>
</html>

Open in new window

EMB01

ASKER

Thanks, the function seems to work. I have a question... I've been developing the PHP-side of this further so now my field looks like this:
<input type="file" name="file[]" id="file[]" />

Can I just change this:
var tRow='<tr><td><input type="file" name='+'"newText'+z_num+'"></td></tr>';

To this:
var tRow='<tr><td><input type="file[]" name='+'"newText'+z_num+'"></td></tr>';

I think I need the ID field in there, too. Thanks for your help.

EMB01

ASKER

Sorry, "input type="file[]" Wouldn't make sense. So, I'm not sure what to do... But, the field I need to add is like this now:
<input type="file" name="file[]" id="file[]" />

Sorry for confusion.

ASKER CERTIFIED SOLUTION

experts1

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

experts1

EMB01,

Remember to comment out the alert(tmpStr)
to //alert(tmpStr)

Regards

EMB01

ASKER

It seems to work great (I made a minor change to the tRow var). Only problem is that when I enter info in the fields and click the "add row" button, all the previous file fields get knocked out. Can this be fixed? Note: The caption fields are fine, but the file fields get cleared... My code is attached.

<SCRIPT language=JavaScript type=text/javascript>
var z_num, tmpStr, oldstr, newname
z_num=0
function getOldStr() {
oldstr=document.getElementById("form1").innerHTML;
}
function addNewRow(){
  z_num += 1;
  //newname='file'+z_num+'[]'
  if(z_num==1) oldstr=document.getElementById("form1").innerHTML;
  var tRow='<tr><th scope="col">File:</th><td scope="col"><input type="file" name="file[]" id="file"></td></tr><tr><th scope="col">Caption:</th><td scope="col"><input name="c[]" type="text" id="c[]" /></td></tr>';
  tmpStr=document.getElementById("form1").innerHTML;
  tmpStr=tmpStr.replace("</TBODY></TABLE>","</tbody></table>");
  tmpStr=tmpStr.replace("</tbody></table>",tRow+"</tbody></table>");
  document.getElementById("form1").innerHTML = tmpStr;
//alert(tmpStr);
}
function resetForm(){
  document.getElementById("form1").innerHTML = oldstr;
}
</SCRIPT>

Open in new window

experts1

EMB01,

For some reason IE browser will keep the value of the text input box, while Firefox and Netscape will not.

However, I suspect it has to do with the way the content of innerHTML is saved.

Solution would be to make an array to store the value of each File/Content input and save the contents after each added pair and then to restore the the values after each addition of input boxes.

Otherwise you might need to validate that all File/Content inputs have data before submitting, by using the form onSubmit() function.

Regards